::selection不生效主因是优先级不足或被覆盖，仅支持color/background-color等有限属性，不支持!important、内联样式及CSS变量，且在input/textarea、canvas、SVG等元素上天然无效。
为什么::selection有时完全不生效
根本原因通常是选择器优先级不足，或被更具体的规则覆盖。比如全局写 ::selection，但某个组件里用了 .article p::selection 且背景设为透明，那你的全局样式就失效了。
常见错误现象：::selection 写了但选中文本还是默认蓝底白字；或者只在部分元素上生效。
- 必须确保没有更高优先级的同名伪元素规则（检查 DevTools 的 Computed 面板）
- 不能用 ID 选择器或内联样式覆盖它——
::selection不支持!important，也不响应内联style - 某些 CSS 重置库（如 Normalize.css）会主动清空
::selection，需手动补回 - 只支持有限的属性：仅
color、background-color、text-shadow、cursor、outline（部分浏览器），其他如font-size或border会被忽略
::selection 在不同浏览器里的兼容性差异
Chrome / Edge 106+ 和 Safari 16.4+ 支持标准语法；Firefox 从 60+ 开始支持，但旧版本需加 ::-moz-selection 前缀——现在基本可不写，除非还要兼容 Firefox 59 及更早。
关键区别在于：Safari 对 text-shadow 的渲染偏弱，而 Firefox 曾长期不支持 background-image（至今仍不支持）。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
background-image或渐变——所有浏览器都不认 -
color和background-color是最稳的，建议只用这两个 - 移动端 Safari 在 iOS 16.4 之前完全忽略
::selection，升级系统或降级方案（如禁用默认选中）是唯一办法
如何让 ::selection 适配深色模式
不能直接用 @media (prefers-color-scheme: dark) 嵌套 ::selection（语法非法），得把媒体查询放在外层，再重复声明伪元素。
使用场景：网站已用 prefers-color-scheme 切换主题，但选中文本在深色背景下仍是浅色背景，导致对比度爆炸。
- 写法必须是：
@media (prefers-color-scheme: dark) { ::selection { background-color: #4a5568; color: white; } } - 避免在
:root里定义 CSS 变量再塞进::selection——变量不会被解析，得手写具体值 - 如果用了 CSS-in-JS（如 Emotion），注意动态插入的
::selection规则可能被隔离作用域，需提至全局 style 标签
哪些元素上 ::selection 天然无效
不是所有可选中文本的容器都响应 ::selection。核心限制来自渲染层：只有「文本内容由浏览器原生排版引擎绘制」的元素才支持。
常见错误现象：给 <canvas> 上模拟的文字加 ::selection 没反应；或者 React 中用 contenteditable + 自定义光标后，选区样式消失。
-
<input>和<textarea>完全不支持::selection（它们用::-webkit-input-placeholder等独立伪元素） -
user-select: none会直接禁用选中行为，::selection自然无意义 - WebGL / Canvas 渲染的文字、SVG
<text>元素、以及用paint()` API 绘制的文本，都不走 CSS 选中流程</li> <li>Shadow DOM 内部需在 shadow root 中单独定义 <code>::selection
，不会继承外部样式
user-select: none 悄悄开着。 
