::selection必须同时声明::selection和::-webkit-selection并显式设置color与background-color才生效；失效主因是user-select:none、作用域隔离（如scoped/shadow dom）或选择器权重冲突，仅支持color、background-color和text-shadow（safari 15.4+），其他属性被静默忽略。
::selection 必须同时写 ::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 只认哪些 CSS 属性
它不是普通选择器，只支持极有限的属性，其他一律静默丢弃：
- 必须用
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 上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
