CSS如何处理不同内核对于Selection文本选中样式的限制_分别定义Webkit-selection与原生伪元素

必须同时声明::selection和::-webkit-selection才能兼容各浏览器；Firefox仅支持color、background-color、text-shadow，而WebKit扩展支持border等属性；两者均不继承、不支持嵌套或逻辑选择器，移动端Safari存在渲染延迟问题。

Webkit内核必须用::-webkit-selection，其他浏览器不认

Firefox、IE/Edge（旧版）和Chrome/Edge（Chromium）对文本选中样式的支持差异很大：只有 Webkit/Blink 内核（Chrome、Safari、新版 Edge）识别 ::-webkit-selection；Firefox 用的是 ::selection；IE10+ 和旧 Edge 也支持 ::selection，但兼容性弱。这意味着你不能只写一个伪元素——必须同时声明两个，且顺序无关，浏览器会各自取用能识别的那一个。

常见错误是只写 ::selection，结果在 Chrome 里完全不生效；或者把 ::-webkit-selection 写在后面还加了 !important，以为能“覆盖”，其实无意义——它们互不干扰，各自独立匹配。

::selection 和 ::-webkit-selection 的样式能力不一致

Firefox 的 ::selection 只允许设置 color、background-color 和 text-shadow；而 ::-webkit-selection 支持更多属性，比如 border、outline、border-radius（部分版本），甚至 box-shadow（Chrome 120+）。但注意：font-weight、font-size、transform 这类影响布局或渲染的属性，两个伪元素都**一律忽略**。

• 想加背景高亮？两个都设 background-color 最稳妥
• 想微调文字颜色对比度？color 在两者中都可用
• 想加边框或阴影？只在 ::-webkit-selection 里写，Firefox 会静默丢弃
• 别试图用 line-height 或 padding 调整选中区域高度——无效

作用域限制：不能继承，不能用类名组合，不支持嵌套选择器

::selection 和 ::-webkit-selection 都是全局伪元素，只能直接挂在元素上，不接受父选择器限定（比如 .article ::selection 是合法的，但 .article p::selection 中的 p 实际上被忽略，最终作用于所有后代文本）。更关键的是：它们**不继承**父级样式，所有属性必须显式声明。

立即学习“前端免费学习笔记（深入）”；

典型翻车场景：

• 写了 .content { color: #333; } .content::selection { color: white; } —— 没问题
• 但若 .content 里有 <span style="color: #f00">红色字</span>，选中时该 span 文本的 color 不会自动变成 white，除非你额外写 .content span::selection
• 用 :not() 或 [data-disabled] 尝试排除某段文本？不行，伪元素不支持这类逻辑

移动端 Safari 的特殊表现：长按选中可能触发默认菜单，样式延迟或失效

iOS Safari 对 ::-webkit-selection 的支持不稳定：长按唤起选中状态后，样式有时延迟应用，甚至完全不出现，尤其在 contenteditable 或 iframe 内。这不是 CSS 写错了，而是 Webkit 在移动端对 selection 伪元素的渲染优先级较低。

应对方式很实际：

• 避免在移动端强依赖选中样式做功能提示（比如靠变色指示可复制）
• 如果必须用，加一层 JS 监听 selectionchange，手动给选中范围包裹临时 span 并设内联样式（绕过伪元素限制）
• 测试时务必真机验证，模拟器常显示正常，实机却失效

最麻烦的一点是：这些伪元素无法通过 DevTools 的 “Styles” 面板实时调试——你得靠肉眼观察，或用 JS 打印 getSelection() 状态来间接验证。