::selection 中 color 属性不继承父级且跨浏览器支持差，必须与 background-color 同时显式声明才可能生效；Safari 基本忽略 color，iOS 尤甚；可靠方案是 JS 模拟选中高亮。
selection伪元素不继承父级color，必须单独设color
直接写 ::selection { color: red; } 看似能改文字颜色，但实际常失效——因为浏览器默认只对选中文字应用背景色，color 属性在多数引擎里会被忽略或受限。真正起效的组合是同时声明 color 和 background-color，且 color 必须显式指定，不能依赖继承。
- Chrome/Edge 106+ 支持
color在::selection中生效，但仅当background-color也被设置时才可靠 - Safari 一直要求
background-color存在，否则color被静默丢弃 - Firefox 对
color支持最弱，部分版本下即使写了也显示为系统默认文字色 - 别用
inherit或unset，它们在::selection里行为不一致，一律写死值，比如color: #fff;
跨元素选中时，::selection作用域以最近的可选中祖先为准
如果一段文字被包裹在多个嵌套容器里（比如 <div><p><span>文本</span></p></div>），而你只给 <span></span> 设了 ::selection 样式，那整段选中时并不会自动沿用它的规则——::selection 是按“选区所属的最高可选中块级容器”来匹配的，通常是 <p></p> 或 <div>。
<ul>
<li>想让某段文字有独立高亮效果，得把 <code>::selection 写在它最外层的、有用户可选中文本内容的块级元素上（如 p::selection）
<span></span>, <em></em>）本身不触发 ::selection 匹配，除非其父块级元素没定义该样式user-select: none，里面所有子元素都无法被选中，::selection 完全不生效移动端 Safari 的 selection 样式支持极差，基本不可靠
iOS/iPadOS 上的 Safari 几乎无视 ::selection 的 color 声明，哪怕加了 background-color，文字色仍固定为黑色或白色（取决于背景亮度），且无法通过 CSS 变量或 JS 动态注入绕过。
立即学习“前端免费学习笔记（深入）”；
- 不要指望在 iOS Web 页面里实现自定义选中文本色；能稳定控制的只有背景色（且颜色范围受限）
- Android Chrome 表现相对好，但低版本（≤110）仍可能忽略
color - 若业务强依赖高亮效果，需降级方案：用 JS 监听
selectionchange，手动包裹选中文本并插入<mark></mark>或带 class 的<span></span>
避免用 !important 强行覆盖，优先靠选择器权重和声明顺序
有些框架或 UI 库（如 Ant Design、Bootstrap）会在全局注入 ::selection 规则，导致你的样式被覆盖。这时候加 !important 看似解燃眉之急，但容易引发维护混乱，且在 Shadow DOM 或 iframe 场景下依然无效。
- 更稳妥的做法是提升选择器权重，比如用
body p::selection替代p::selection - 确保你的 CSS 文件在第三方样式之后加载，声明顺序决定最终生效规则
- 若用 CSS-in-JS（如 styled-components），注意其生成的选择器默认带哈希后缀，天然比普通类名权重高，反而容易覆盖不到
- 检查 DevTools 的 Styles 面板，确认
::selection规则是否被 strike-through —— 被划掉就说明被更高优先级规则干掉了
真正麻烦的不是写法，而是不同浏览器对 ::selection 的实现差异太大，尤其是 color 这个属性，在 Safari 里基本等于摆设。如果设计稿里那个高亮黄底红字是硬性需求，得提前跟产品对齐：Web 端只能保底做背景色，精细控制必须上 JS 模拟。
