::selection仅支持background-color和color，需兼容-webkit-和-moz-前缀并注意顺序，且受user-select:none、优先级、CSS-in-JS注入方式及iOS/表单元素限制。
::selection 只能改 background-color 和 color，其他属性写了也白瞎。它不是普通选择器，不能加动画、不能设边框、不能调字体大小，连 background-image 都不认——只吃纯色值，比如 #ff6b6b 或 rgba(255, 107, 107, 0.8)。
为什么写了 ::selection 却没变色
大概率是被 user-select: none 拦住了。只要祖先元素（哪怕 body）设了这个，子元素就根本选不了，伪元素自然没机会触发。另外常见干扰源：
-
::selection被更具体的选择器覆盖，比如p::selection写在前面，后面又来个article p::selection，后者会赢 - 用了 CSS-in-JS（如 styled-components），
::selection规则没挂到 document 根层，得靠injectGlobal或全局<style>标签兜底 - 某些 UI 库（如 Ant Design）悄悄重置了
body的user-select，导致你写的规则失效
怎么写才真正跨浏览器生效
别只写 ::selection。Firefox 旧版（≤67）必须靠 ::-moz-selection，WebKit 旧引擎（老 Safari/Android WebView）要 ::-webkit-selection。三者顺序不能乱：
::-moz-selection { background-color: #ff6b6b; color: white; }
::-webkit-selection { background-color: #ff6b6b; color: white; }
::selection { background-color: #ff6b6b; color: white; }
注意：::-moz-selection 必须放最前，否则会被后面的规则覆盖；::selection 放最后作兜底。
立即学习“前端免费学习笔记（深入）”；
想只对代码块或某段文字生效，怎么限定范围
不能直接写 .code-block::selection 然后期待它只影响那个区域——它确实能生效，但前提是该区域文本可被选中，且没被更高优先级的规则压掉。实操要点：
- 给目标元素加明确 class，比如
<pre class="code">，然后写.code::selection - 避免嵌套过深，Sass 编译后生成的
.article .content p::selection权重虽高，但容易因层级太深被忽略 - 移动端 iOS 系统级选择菜单（长按弹出的那个）完全无视
::selection，此时背景色永远是浅灰，CSS 无解 -
<input>和<textarea>不响应::selection，它们走系统原生样式，只能用caret-color控制光标
真正难处理的不是怎么写，而是当用户在 iOS 上长按时，系统直接接管选中态，你写的 background-color 一丁点都不会出现——这不是 bug，是平台限制，得接受。
