::selection在chrome/safari中需同时声明::-webkit-selection且内容完全一致才生效，仅支持color、background-color等少数属性，不支持font-size等；user-select: none会使其彻底失效。
只写::selection在Chrome/Safari里大概率失效
现代浏览器对::selection的兼容要求比普通伪类严格得多——它不是“写了就生效”，而是强制要求你同时声明::-webkit-selection，且两个规则的内容必须完全一致：属性名、值写法（比如都用#ff6b6b，别一个用rgb()一个用十六进制）、顺序最好也一致。
常见错误是只写::selection，结果在 Safari 15.3 及更早、部分 Android WebView 中直接被忽略。正确姿势是：
::-webkit-selection {
background-color: #ff6b6b;
color: white;
}
::selection {
background-color: #ff6b6b;
color: white;
}
注意：::-moz-selection已废弃，Firefox 现代版不再需要；但::-webkit-selection不能省，PostCSS autoprefixer 默认不处理它，构建时得确认没被误删。
::selection只认color和background-color，其他全是摆设
它不是普通选择器，浏览器会静默丢弃所有不支持的声明，不报错也不提示。你写了font-size、border、padding、opacity、background-image，等于白写。
真正可靠生效的只有这几个：
-
color（文字颜色） -
background-color（背景色，必须用不透明值，如#2d2d2d；避免rgba(0,0,0,0.3)或transparent，Safari 渲染不稳定） -
text-shadow（Chrome/Firefox 支持，Safari 15.4+ 才开始支持） -
cursor（部分浏览器支持，但实际效果有限）
特别提醒：background简写属性有时会失效，务必用background-color全称。
局部样式覆盖靠选择器权重，不是“作用域”
::selection本身没有独立作用域，它永远绑定到被选中文本所在的宿主元素。所谓“给.article设高亮色”，其实得写成.article p::selection或.article code::selection——因为文本通常在子标签里，不是直接挂在.article上。
容易踩坑的点：
-
.code-block::selection这种写法无效，浏览器根本不识别 -
p::selection比::selection优先级高，能覆盖全局规则 - 不要嵌套：
p::selection span或@media (prefers-color-scheme: dark) { ::selection }均不生效 - 移动端（尤其 iOS）常被系统高亮覆盖，长按选词时 CSS 可能完全不触发
user-select: none会让::selection彻底失能
这是最隐蔽也最常见的失效原因：父容器或自身设置了user-select: none，文本根本无法被选中，::selection自然无从谈起。
排查方法很直接：
- 在 DevTools 的 Elements 面板里选中一段文字，看 Styles 面板是否出现
::selection规则 - 往上逐级检查 computed styles 中的
user-select值，确认不是none - 如果用了 React/Vue 动态渲染内容（如
dangerouslySetInnerHTML），还得确认样式没被 scoped 或 Shadow DOM 隔离
深色模式适配、对比度校验、移动端 fallback 这些事，浏览器不会帮你做——color和background-color必须手动配对测试可读性，尤其在复杂背景或暗色主题下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
