::selection 样式常不生效的根本原因是其低优先级易被后代元素更具体的 color/背景声明覆盖，且仅支持 color、background-color、text-shadow（部分浏览器）等少数属性，Firefox 需额外写 ::-moz-selection，启用 user-select: none 会彻底禁用选择。
为什么 ::selection 样式经常不生效
根本原因不是写法错，而是浏览器默认行为和层叠规则在“暗中作祟”。::selection 是一个低优先级伪元素，它会被后代元素上更具体的颜色/背景声明覆盖——尤其是当文本包裹在 <span></span>、<a></a> 或设置了 color 的容器里时，选中样式就“消失”了。
::selection 必须用 !important 吗
不是必须，但绝大多数实际场景下需要。因为：
- 用户代理样式表（如 Chrome 对
<a></a>的color: -webkit-link）自带高权重 - 内联样式或 CSS-in-JS 生成的规则常带更高特异性
-
::selection自身不继承父级color，但它的生效受父级background-color影响（比如父容器半透明背景会透出底层色）
稳妥做法是显式加 !important，尤其针对 color 和 background-color：
::selection {
color: #fff !important;
background-color: #007acc !important;
}
哪些 CSS 属性在 ::selection 中真正可用
仅限极少数属性被规范支持，其余会被忽略：
立即学习“前端免费学习笔记（深入）”；
- ✅
color - ✅
background-color - ✅
text-shadow（部分浏览器支持，但 Firefox 不支持） - ❌
font-size、padding、border、transform等全部无效
注意：background-image 在 Safari 和旧版 Edge 中可能触发渲染异常，建议只用纯色。
跨浏览器兼容性要注意什么
Chrome / Edge / Safari 都支持标准 ::selection，但 Firefox 仍要求旧语法 ::-moz-selection（且必须单独写，不能合并）：
::selection {
color: #fff;
background-color: #007acc;
}
::-moz-selection {
color: #fff;
background-color: #007acc;
}
另外，移动端 Safari 在某些混合内容（如 iframe、Webview 内嵌页）中会禁用 ::selection，这不是 bug，是主动限制。
最易被忽略的一点：如果页面启用了 user-select: none（哪怕只在某个父容器上），整个子树都不可选，::selection 自然无从谈起——检查 DOM 上是否意外挂了这个声明。
