::selection 伪元素可自定义选中文本的 color 和 background-color，需同时设置才生效；不支持复杂样式、不可继承、无法用 JS 动态修改；兼容性需考虑浏览器前缀与作用域限制。
如何用 CSS 的 ::selection 伪元素设置选中文本颜色
网页中用户鼠标拖拽选中的文字，默认是蓝色背景+白色文字，但可以通过 ::selection 自定义颜色。它不是所有浏览器都完全支持，且仅作用于当前元素及其子元素中被选中的文本部分。
关键点：必须同时设置 color 和 background-color 才能生效；不支持边框、阴影、渐变等复杂样式；不能继承，需单独写在目标元素上或全局重置。
-
::selection是标准语法（Chrome 110+、Firefox 120+、Safari 16.4+ 支持） - 旧版 Safari 需要
::-webkit-selection，Firefox 旧版本曾用::-moz-selection（现已废弃） - 若对
<input>或<textarea>生效，需额外加input::selection等具体选择器 - 无法通过 JavaScript 动态修改
::selection样式（它不属于 DOM 可操作样式）
为什么直接写 body::selection { color: red; } 有时没效果
常见失效原因不是语法错，而是优先级或作用域问题。比如页面里某个组件用了 user-select: none，那里面文字根本无法被选中，::selection 就无从触发；又或者你写了 div::selection，但实际选中的是 div 内的 p 标签，而 p 自己定义了更高优先级的 ::selection，就会覆盖外层设置。
- 检查是否被
user-select: none或pointer-events: none阻断了选择行为 - 确保没有更具体的选择器（如
p::selection）意外覆盖了你的全局规则 - 某些框架（如 Vue 的 scoped style）会自动添加属性选择器，导致
::selection规则失效，需用:deep(::selection)（Vue）或/deep/ ::selection（旧写法）穿透 - 不要依赖继承——
body::selection不会自动应用到所有子元素，必须显式写成*::selection或逐个声明
*::selection 全局设置的兼容性与风险
用通配符 *::selection 看似一劳永逸，但要注意：它会让所有可选中文本统一风格，包括 <input>、<textarea>、甚至浏览器自动生成的上下文菜单文字（极少数情况下）。而且 Safari 对 *::selection 的匹配行为较保守，可能跳过某些内联元素。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
*::selection { color: #fff; background-color: #3a86ff; } - 若需差异化控制，分开写：
p::selection、h1::selection、input::selection - 移动端 Safari 在长按呼出菜单时，
::selection可能不触发，这是系统级限制，无法绕过 - 暗色模式下，如果只设固定色值，可能和背景对比度不足，建议配合
@media (prefers-color-scheme: dark)调整
JavaScript 无法动态修改 ::selection，但可以间接控制
因为 ::selection 是伪元素，不在 DOM 树中，getComputedStyle 拿不到，style 属性也设不了。真要响应主题切换，只能靠切换 CSS 类或重写 <style> 标签内容。
- 方案一：预定义多套 class，如
.theme-dark::selection，再用 JS 切换document.body.className - 方案二：用
document.styleSheets找到对应规则并修改cssText（需注意跨域限制和规则索引不稳定） - 方案三：最稳妥的是服务端渲染不同主题的 CSS，或用 CSS 自定义属性（
var(--selection-bg)），然后 JS 改:root的变量值——但注意::selection中不能使用 CSS 变量（截至 Chrome 125 / Firefox 126，仍不支持） - 别尝试用
document.execCommand或 Selection API 模拟选中来“骗过”样式，无效
::selection 的内核？这些细节比语法本身更耗时间。 
