::selection伪元素失效的三大主因是user-select: none禁用选择、作用域限制（如scoped或Shadow DOM）及选择器权重不足；需同时声明::-webkit-selection与::selection且样式完全一致，仅color和background-color生效，其他属性被忽略。
为什么写了::selection却完全没反应
不是语法错了，而是浏览器压根没触发这个伪元素。最常见原因有三个：
• 父容器或自身设置了user-select: none——文本根本不能被选中，::selection自然不会运行
• 写在<style scoped>（如 Vue）或 Shadow DOM 里——它不穿透作用域，直接被忽略
• 页面某处写了更具体的选择器，比如p::selection，而你的全局::selection权重不够，被覆盖了
排查方法：选中一段文字，在 DevTools 的 Styles 面板里搜::selection，看有没有规则显示出来；再往上逐级检查 computed styles 中的user-select值。
::-webkit-selection和::selection必须同时写且内容一致
只写::selection在 Chrome、Edge、Safari（尤其 15.3 及更早）里大概率失效。WebKit/Blink 内核浏览器强制要求显式声明::-webkit-selection，且两个规则的声明必须完全相同——包括属性顺序、值写法（比如都用#ff6b6b，别一个用rgb()一个用hex）。
• Firefox 现代版已废弃::-moz-selection，不用再写
• ::-webkit-selection建议放在前面，::selection放最后作为标准兜底
• PostCSS autoprefixer 默认不处理这两个伪元素，如果用了构建工具，得确认它没把::-webkit-selection给删掉
::selection只认color和background-color，其他属性基本白搭
它不是普通选择器，设了font-size、border、padding、background-image、opacity、transform都会被静默丢弃，不报错也不提示。
• 必须同时设置color和background-color——只写一个常导致黑底黑字或白底白字，根本看不出变化
• text-shadow：Firefox 和 Chrome 支持，Safari 直到 15.4+ 才开始认
• 别用rgba()或hsl()带 alpha 的颜色值：Safari 渲染不稳定，深色背景上可能发灰或透明，优先用十六进制不透明值，比如#3b82f6而非rgba(59, 130, 246, 0.3)
• background简写有时会失效，必须用全称background-color
局部样式容易被全局覆盖，别嵌套也别靠权重硬刚
::selection本身没有特异性权重，它的“作用域”完全取决于外层选择器。你在.article p::selection里写，其实等价于给整个文档的p元素设选中样式——而且很容易被后面更宽泛的::selection规则压住。
• .code-block::selection是无效语法，浏览器不识别
• 想视觉上“局部化”，只能靠继承重置：比如给代码块区域设color: #222; background-color: #f8f8f8;，再让它的::selection基于此渲染
• 把::selection规则放在 CSS 文件最底部，避免被后续规则覆盖
• input/textarea 内支持极不稳定，Chrome 下基本不响应，别在这类元素上强求
立即学习“前端免费学习笔记（深入）”；
