::selection 无效的三大主因是父元素设了 user-select: none、作用域限制（如 scoped 或 shadow dom）、或被更具体选择器覆盖；须双写 ::-webkit-selection 和 ::selection 且属性完全一致；仅 color 与 background-color 生效，需同时设置；不同区块需显式为文本容器声明规则。
为什么写了::selection却完全没反应
不是语法错了，是选中行为根本没触发。最常见原因有三个：user-select: none写在父元素（比如body或某个div）上，文本压根不能被选；用了<style scoped></style>或 Shadow DOM，::selection不穿透作用域；或者页面里有更具体的选择器（如p::selection）覆盖了你写的全局规则。排查方法：选中一段文字 → 打开 DevTools → 在 Styles 面板搜索 ::selection，看有没有匹配项；再点 Computed 面板，检查 user-select 是否为 none。
::-webkit-selection 和 ::selection 必须双写且内容严格一致
只写 ::selection 在 iOS Safari 15.4 之前、Android WebView、旧版 Chrome 等环境会直接失效。正确做法是：::-webkit-selection 放前面，::selection 放后面，两条规则的属性名、值写法（比如都用 #3b82f6，别一个用 rgb() 一个用十六进制）必须完全相同。PostCSS autoprefixer 默认不处理这两个伪元素，如果用了构建工具，得确认它没把 ::-webkit-selection 给删掉。
::selection 只认 color 和 background-color，其他属性基本白写
它不是普通选择器，规范只允许修改极少数视觉属性：color 和 background-color 是必须同时设置的两个，缺一不可；只设 background-color 时，文字可能继承默认黑色，在深色背景上直接“消失”。text-shadow 在 Chrome/Firefox 支持，Safari 15.4+ 才开始支持，但深色背景下容易看不清；background 不等于 background-color——写 background: #007acc 有时会失效，必须用全称。别用 hsl() 或带 alpha 的 rgba()，Safari 渲染不稳定，优先用十六进制值。
想给不同区块设不同高亮色，得靠容器选择器显式声明
::selection 不继承，也不跨元素渐变。跨区块选中时，颜色由起点所在元素的最近有效规则决定。所以不能只写 .article::selection，而要落到实际承载文本的元素上，比如：.article p::selection、.article h2::selection。如果区块内有嵌套结构（如 blockquote > cite），就得逐层写：.quote blockquote::selection, .quote cite::selection。注意伪元素不支持 !important，冲突时靠选择器权重决胜。
真正卡住人的地方不在怎么写，而在「谁能让它生效」：文本得能被选中、样式得能被注入、规则得不被更高权重覆盖。移动端和暗色模式下尤其容易翻车，比如 iOS 系统级菜单会绕过 CSS 直接调用原生高亮逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
