::selection要真正起效，需同时声明::-webkit-selection和::selection且样式完全一致，避开user-select:none、作用域隔离及高权重选择器干扰，仅color和background-color有效。
::selection 要真正起效，不是写对语法就行，而是得绕过浏览器一堆默认拦截和作用域陷阱。它大概率“不生效”，不是你漏了分号，而是被 user-select: none、<style scoped></style>、或 iOS 系统级菜单直接废掉了。
为什么写了 ::selection 却完全没反应
不是 CSS 写错了，是选中行为根本没触发：
-
user-select: none写在父容器（哪怕只是body）或自身上——文本压根不能被选，伪元素自然不运行 - 用 Vue 的
<style scoped></style>或 Shadow DOM 包裹——::selection不穿透作用域，样式被丢弃 - 页面里有更具体的选择器，比如
p::selection或.article::selection，权重高于全局::selection，把你写的规则覆盖了 - 用了 CSS-in-JS 库（如 styled-components）动态注入样式——前缀被删、作用域隔离、或规则没挂到
，导致无效
排查方法：选中一段文字 → 打开 DevTools → 在 Styles 面板搜索 ::selection，看有没有匹配规则；再往上点 computed styles，检查 user-select 是否为 none。
::-webkit-selection 和 ::selection 必须同时写且内容一致
只写 ::selection 在 Chrome、Edge（Chromium）、新版 Safari 里大概率失效。WebKit/Blink 内核浏览器强制要求显式声明 ::-webkit-selection，且两个规则的声明必须完全相同：
立即学习“前端免费学习笔记（深入）”；
- 属性名、值写法（比如都用
#3b82f6，别一个用rgb()一个用 hex）必须一致 -
::-moz-selection已废弃，Firefox 100+ 只认::selection，不用加 -
::-webkit-selection建议放在前面，::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（仅悬停时生效，极少用） -
background不等于background-color：写background: #007acc有时会失效，必须用全称 - 避免用
hsl()或带 alpha 的rgba()——Safari 渲染不稳定，深色背景上可能变灰或透明；优先用十六进制值
怎么给不同区块设置不同高亮颜色
直接给 body 或 :root 设 ::selection 会全局生效，没法区分区块。真正起作用的是「谁的后代被选中」——::selection 始终作用于被选中文本所在元素的祖先上下文，所以必须把样式写在具体容器的选择器里：
- 常见错误是写成
.sidebar::selection { color: red; }却发现没效果，原因往往是该容器内文本实际属于子元素（比如p、span），而::selection不继承，必须显式作用到文本宿主元素上 - 推荐写法：
.article p::selection { background: #ffcc00; }（文章段落高亮为黄色） - 若要覆盖嵌套结构，需逐层指定：
.quote blockquote::selection, .quote cite::selection { color: #666; } - 跨元素选区的颜色由最近的父级
::selection决定：当用户拖选跨越多个区块（比如从.header拖到.main），浏览器不会混合颜色，而是采用「选区起点所在元素的最近有效::selection规则」
移动端 Safari 对 ::selection 支持较弱，iOS 15.4+ 才稳定支持 background-color，且不自动适配暗色模式——这意味着你在深色主题下硬写 background-color: white，可能在某些设备上直接看不见文字。
