::selection在现代浏览器中不生效的根本原因是仅color、background-color等5个属性被支持，其他属性会静默忽略；必须按顺序声明四种前缀变体，且父级user-select:none会彻底禁用高亮。
为什么 ::selection 在 Chrome/Firefox 里不生效
根本原因不是写法错，而是现代浏览器（Chrome 120+、Firefox 110+）默认只允许对 ::selection 设置有限的 CSS 属性：仅 color、background-color、text-shadow、cursor 和 outline 有效，其他如 font-weight、border、transform 会被静默忽略。
更常见的是开发者误加了不支持的属性（比如 background-image 或 opacity），导致整个规则被浏览器丢弃——尤其在使用 PostCSS 或 CSS-in-JS 时，未加前缀的声明可能触发兼容性降级逻辑。
::selection 必须加前缀才能覆盖所有浏览器
尽管规范已稳定，但 Safari 16.4 之前、Edge 18–90、旧版 Firefox 仍依赖私有前缀。只写标准语法 ::selection 会漏掉大量真实用户。
正确写法必须按顺序声明全部四种前缀变体：
立即学习“前端免费学习笔记（深入）”；
搜索 Hivemind 精选的 Web3 营销知识库（RAG），获取从业者洞察、框架、实操指南和案例研究。当：(1) an... 时使用此技能。
/* 必须全部写齐，顺序不能乱 */
::selection {
background-color: #ff6b6b;
color: white;
}
::-moz-selection {
background-color: #ff6b6b;
color: white;
}
::-webkit-selection {
background-color: #ff6b6b;
color: white;
}
::-ms-selection {
background-color: #ff6b6b;
color: white;
}- 不要省略
::-moz-selection：Firefox 一直没完全放弃它，尤其在某些 Linux 发行版或旧版本中 - 不要用
*::selection这类通配前缀写法，无效 - 避免在同一个选择器里混用标准和带前缀版本，CSS 解析器可能跳过整条规则
伪元素作用域限制：父容器 user-select: none 会彻底禁用高亮
如果文本所在元素或任意上级设置了 user-select: none（比如按钮、卡片标题、React 组件内封装的 div），那么 ::selection 根本不会触发——连样式计算都不会进入。
排查方法：
- 打开 DevTools，选中文本，看右侧 Styles 面板是否显示
::selection规则被划掉或灰色禁用 - 临时移除父级的
user-select声明，确认是否恢复生效 - 若必须禁用选择但又要保留高亮效果，改用
pointer-events: none+ 单独可选区域包裹文本（需权衡交互逻辑）
深色模式下 background-color 对比度不足导致“看起来无效”
很多开发者设了 background-color: #333，但在深色系统主题下，用户选中文本时实际看到的是灰蒙蒙一片，误以为没生效。这不是 bug，是颜色叠加后的视觉失效。
解决思路：
- 用
prefers-color-scheme媒体查询区分定义：
@media (prefers-color-scheme: dark) {
::selection {
background-color: #5a5aee;
}
::-moz-selection { background-color: #5a5aee; }
::-webkit-selection { background-color: #5a5aee; }
::-ms-selection { background-color: #5a5aee; }
}- 避免使用纯黑（
#000）或纯白（#fff）作为高亮背景，它们在对应主题下极易丢失对比度 - 用 Chrome 的 Rendering 面板勾选 “Emulate CSS media feature prefers-color-scheme” 快速验证
真正麻烦的是跨 shadow DOM 场景——如果文本在 Web Component 内部且组件启用了 scoped 样式，::selection 必须显式写在组件样式内，外部全局样式无法穿透。这点很容易被忽略。
