不同区块需用具体容器选择器（如.article p::selection）设置::selection样式，因该伪元素不继承且作用于文本宿主元素；跨区块选中时颜色由起点所在元素的最近有效规则决定，无法渐变；仅支持color、background-color等有限属性。
不同区块用不同 ::selection 颜色，得靠选择器层级控制
直接给 body 或 :root 设 ::selection 会全局生效，没法区分区块。真正起作用的是「谁的后代被选中」——::selection 始终作用于被选中文本所在元素的祖先上下文，所以必须把样式写在具体容器的选择器里。
常见错误是写成 .sidebar::selection { color: red; } 却发现没效果，原因往往是该容器内文本实际属于子元素（比如 p、span），而 ::selection 不继承，必须显式作用到文本宿主元素上。
- 推荐写法：
.article p::selection { background: #ffcc00; }（文章段落高亮为黄色） - 若要覆盖嵌套结构，需逐层指定：
.quote blockquote::selection, .quote cite::selection { color: #666; } - 注意伪元素不支持
!important，冲突时靠选择器权重决胜
::selection 不支持所有 CSS 属性，别乱试
::selection 只允许设置有限的几个属性：color、background-color、text-shadow、cursor（部分浏览器）、outline（极少数）。其他如 font-weight、border、transform 全部会被忽略，写了也白写。
尤其注意 background-color 和 color 是最常用且兼容性最好的组合；text-shadow 在 Chrome 和 Safari 支持较好，Firefox 目前不支持。
- 安全写法：
.code-block::selection { background: #2d2d2d; color: #f8f8f2; } - 避免踩坑：
.note::selection { border: 1px solid red; }→ 这行无效 - 移动端 Safari 对
::selection支持较弱，iOS 15.4+ 才稳定支持background-color
跨元素选区的颜色由最近的父级 ::selection 决定
当用户拖选跨越多个区块（比如从 .header 拖到 .main），浏览器不会混合颜色，而是采用「选区起点所在元素的最近有效 ::selection 规则」。也就是说，颜色不是按区域拼接，而是一统到底。
这导致一个现实限制：无法实现真正意义上的「无缝渐变高亮」。如果设计要求视觉上分块差异明显，得靠缩短可连续选中的范围来规避——比如给不同区块加 user-select: none，或用 contenteditable="false" 隔离。
- 实测行为：起点在
.nav a::selection区域，即使选到.main p，整段都按a::selection样式渲染 - 补救思路：对关键分界处的元素设
user-select: text显式重置，避免意外继承 - 不要依赖
*::selection全局重置，它容易被更具体的选择器覆盖且难以调试
Firefox 需额外加 -moz- 前缀，但仅限老版本
Firefox 69+ 已原生支持无前缀 ::selection，但如果你的项目仍需兼容 Firefox 68 及更早版本，必须提供带前缀的副本。现代项目基本可省略，但上线前建议用 caniuse.com 查目标用户浏览器分布。
注意：前缀版本只接受单冒号语法 ::-moz-selection（不是 ::-moz-selection），且不能和标准写法共存于同一规则块——必须拆成两条独立声明。
- 兼容写法（仅必要时）：
.excerpt::-moz-selection { background: #e6f7ff; } .excerpt::selection { background: #e6f7ff; } - 当前主流构建工具（如 PostCSS autoprefixer）默认不加此前缀，需手动配置或确认目标环境
- Edge/Chrome/Safari 均无需前缀，写错前缀反而触发解析失败
实际用起来，最难的不是写对语法，而是预判用户怎么选——鼠标拖得长，样式就容易“越界”；内容结构越复杂，越需要提前规划哪些容器该有独立高亮、哪些该统一。留个心眼：改完记得真拿鼠标划一划，别光看 DevTools 里样式是否生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
