必须同时声明::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 文本的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() 状态来间接验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
