必须同时写::selection和::-webkit-selection并显式声明color与background-color才可见；失效主因是user-select:none、作用域限制（如scoped/Shadow DOM）或选择器权重冲突，仅支持color、background-color和text-shadow（Safari 15.4+），其他属性被静默忽略。
必须同时写 ::selection 和 ::-webkit-selection，且都显式声明 color 与 background-color，否则大概率看不见变化。
为什么只写 ::selection 经常没反应
不是语法错，而是浏览器压根不触发这个伪元素。常见原因有三个：
- 父容器或自身设置了
user-select: none—— 文本根本不能被选中，::selection就没机会运行 - 写在
<style scoped></style>（如 Vue）或 Shadow DOM 里 —— 它不穿透作用域，直接被忽略 - 页面某处写了更具体的选择器，比如
p::selection，权重更高，把你全局的::selection覆盖了
排查方法：选中一段文字，在 DevTools 的 Styles 面板里搜 ::selection，看有没有规则显示出来；再往上逐级检查 computed styles 中的 user-select 值。
::selection 只认 color 和 background-color，其他属性基本白搭
它不是普通选择器，设了 font-size、border、padding、background-image、opacity、transform 都会被静默丢弃，不报错也不提示。
立即学习“前端免费学习笔记（深入）”；
- 必须同时设置
color和background-color—— 只写一个常导致黑底黑字或白底白字，根本看不出变化 -
text-shadow：Firefox 和 Chrome 支持，Safari 直到 15.4+ 才开始认，别依赖它做核心可读性保障 - 别用
rgba()或hsl()带 alpha 的颜色值：Safari 渲染不稳定，深色背景上可能发灰或透明，优先用十六进制不透明值，比如#3b82f6 -
background简写有时会失效，必须用全称background-color
移动端和暗色模式下，::selection 行为不可靠
iOS Safari 对 ::selection 支持极弱：仅支持 color 和 background-color，且长按唤起系统级选择菜单时，会强制使用浅灰背景，此时 ::selection 完全不生效——这是系统行为，CSS 无权干预。
- 暗色模式没有自动适配机制，得靠媒体查询手动切，但要注意：某些浏览器在切换系统主题后不会重绘已选中文本
- 真正起效的方式是把深色模式下的规则也单独写一遍，并确保它们在 CSS 中位于常规规则之后（避免被覆盖）
-
input和textarea不响应::selection—— 这不是你写错了，是浏览器有意限制，出于安全与 UX 一致性考虑
真正难处理的不是怎么写，而是当用户在 iOS 上长按、在 contenteditable 区域里拖选、或页面用了 CSS-in-JS 库动态注入样式时，::selection 规则可能根本没挂到 document 根层。这些边界情况，调试时得从 DevTools 的 Elements → Styles 入口一层层扒 computed styles，而不是盯着自己写的那几行 CSS 反复改。
