::selection 伪元素需同时设置 color 和 background-color 才生效，常见失效原因包括 user-select: none、scoped 样式隔离、缺少 ::-webkit-selection 前缀、选择器嵌套过深或权重不足；仅支持 color、background-color 及有限属性，且不继承、不级联。
直接写 ::selection 并同时设置 color 和 background-color 就能生效，但绝大多数“没反应”不是语法错，而是被 user-select: none、作用域隔离或前缀缺失拦住了。
为什么写了 ::selection 却完全不生效
浏览器根本没触发选中逻辑，所以伪元素压根不运行：
-
user-select: none写在父容器（哪怕只是body）上 → 文本不可选，::selection彻底失效 - 用 Vue 的
<style scoped></style>或 Shadow DOM → 样式不穿透，规则被丢弃 - 写了
.article p::selection这种嵌套选择器 → Safari 和旧版 Chrome 直接忽略，必须是全局独立声明 - 更具体的选择器覆盖了你写的规则，比如页面某处有
p::selection，权重高于::selection
排查方法：选中一段文字 → 打开 DevTools → Styles 面板搜索 ::selection，看有没有匹配；再点 Computed，检查 user-select 是否为 none。
::-webkit-selection 和 ::selection 必须双写且内容一致
只写 ::selection 在 Chrome、Edge（Chromium）、Safari 15.4+ 之前大概率失效。WebKit/Blink 引擎强制要求显式声明 ::-webkit-selection，且两条规则的属性名、值写法（如都用 #3b82f6，别一个用 rgb() 一个用 hex）必须完全相同。
-
::-webkit-selection建议放前面，::selection放最后作标准兜底 -
::-moz-selection已废弃，Firefox 100+ 只认::selection，加了反而冗余 - PostCSS autoprefixer 默认不处理这两个伪元素，构建时得确认它没把
::-webkit-selection删掉
正确写法示例：
::-webkit-selection {
color: white;
background-color: #3b82f6;
}
::selection {
color: white;
background-color: #3b82f6;
}
::selection 只认 color 和 background-color
它不是普通选择器，规范只允许修改极少数视觉属性，其余一律静默忽略：
- ✅ 必须同时设置的两个：
color（文字色）、background-color（背景色）——缺一不可。只设background-color时，文字可能继承默认黑色，在深色背景上直接“消失” - ⚠️ 有条件支持：
text-shadow（Firefox 和 Chrome 支持；Safari 15.4+ 才开始认），cursor（仅悬停时生效，极少用） - ❌ 明确不支持：
font-size、padding、border、opacity、transform、background（注意不是background-color） - 避免用
hsl()或带 alpha 的rgba()—— Safari 渲染不稳定，深色背景上可能变灰或透明；优先用十六进制值
不同区块要用具体选择器控制，不能靠继承
::selection 不继承、不级联，它只作用于被选中文本所在元素的直接上下文。想让代码块、引用段落有不同高亮色，就得显式写：
-
pre code::selection→ 影响<pre class="brush:php;toolbar:false;"><code></code> 里的文本</pre> -
.quote blockquote::selection, .quote cite::selection→ 覆盖嵌套结构 - 别写
.sidebar::selection就指望里面所有子元素都生效 —— 如果文本实际在p或span里，必须写成.sidebar p::selection等 - 跨区块选中时，颜色由选区起点所在元素的最近有效规则决定，不会渐变或混合
移动端尤其要注意：iOS Safari 对 ::selection 支持仍不稳定，长按选词常被系统级高亮覆盖，color 和 background-color 是目前最稳妥的组合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
