::selection生效需同时设置color和background-color，仅支持有限属性，且受浏览器兼容性、user-select限制及深色模式适配影响。
为什么 ::selection 设置后没生效
常见现象是写了 ::selection 但文字选中时颜色完全不变，甚至开发者工具里都看不到样式被应用。根本原因不是写法错，而是浏览器默认会忽略不带明确颜色属性的声明，且部分 CSS 属性根本不支持在 ::selection 中使用。
-
::selection只接受有限的几个属性：color、background-color、text-shadow（部分浏览器）、cursor（极少数），其他如font-weight或border一律无效 - 必须同时设置
color和background-color才容易观察效果；只设一个可能被父元素或 UA 样式覆盖 - 如果父容器用了
user-select: none，整个区域无法选中，::selection自然不触发 - Chrome/Edge 120+ 开始要求
::selection规则必须出现在常规样式表中，不能动态通过style.setAttribute注入，否则静默失败
::selection 在不同浏览器里的颜色表现差异
不是所有浏览器都把 ::selection 当成同一套机制处理。比如 Safari 对 background-color 的 alpha 通道支持不稳定，Firefox 则长期不支持 text-shadow。
- Chrome / Edge：支持
color、background-color、text-shadow，但text-shadow在深色模式下可能被系统覆盖 - Safari：
background-color若含透明度（如rgba(0,0,0,0.3)），常渲染为纯黑或纯白，建议用十六进制不透明色 - Firefox：直到 v115 才支持
text-shadow，旧版本会直接丢弃整条规则；且不支持伪元素嵌套（如p::selection::before） - 移动端 WebView（尤其 Android）：很多基于旧版 Chromium，对
::selection支持度更低，甚至完全忽略
如何让自定义选中色在深色模式下也合理
直接写死 background-color: #ffcc00 在深色背景上会刺眼，但用 prefers-color-scheme 媒体查询又不能嵌套进伪元素里——::selection 本身不支持媒体查询作用域。
- 唯一可靠方式是用 CSS 自定义属性 + JavaScript 监听
prefers-color-scheme变化，动态更新根变量： :root { --selection-bg: #add8e6; } @media (prefers-color-scheme: dark) { :root { --selection-bg: #4682b4; } } ::selection { background-color: var(--selection-bg); color: white; }- 注意：CSS 变量必须定义在
:root或目标元素上，不能只在@media内定义而无默认值，否则变量未定义时::selection会回退到浏览器默认 - 别试图用 JS 直接改
document.styleSheets里的::selection规则——多数浏览器禁止运行时修改伪元素样式表
哪些地方绝对不能用 ::selection
它不是万能高亮工具，强行塞进不合适的地方只会引发不可控行为。
立即学习“前端免费学习笔记（深入）”；
- 表单控件内部（如
<input>、<textarea></textarea>）：原生控件的选中样式由操作系统控制，CSS::selection完全无效 - iFrame 内容：父页面的
::selection规则不会穿透到跨源 iFrame，同源 iFrame 也要各自定义 - Canvas 或 SVG 文本：这些是绘图上下文，没有 DOM 选中概念，
::selection不适用 - 内容可编辑区域（
contenteditable）：虽然能生效，但若内含富文本（如加粗、链接），选中样式可能在子节点间断裂，表现不一致
真正要小心的是：伪元素本身不生成盒模型，所以没法用 box-shadow 或 transform 做“高亮动画”，任何想给选中加动效的尝试，本质都是在绕开限制硬搞，结果往往更难维护。
