::selection 必须同时设置 color 和 background-color 才可见，且需兼容 ::-webkit-selection；失效常见于 user-select: none、作用域限制或选择器权重冲突，仅支持 color、background-color 和 text-shadow（safari 15.4+）。
直接写 ::selection 能改，但只声明 background-color 基本看不见效果——必须同时设置 color 和 background-color，否则文字可能和背景同色，等于白写了。
为什么只写 ::selection 常常没反应
不是语法错，而是浏览器压根不触发这个伪元素。常见原因有三个：
- 父容器或自身设置了
user-select: none—— 文本根本不能被选中，::selection就没机会运行 - 写在
<style scoped></style>（如 Vue）或 Shadow DOM 里 —— 它不穿透作用域，直接被忽略 - 页面某处写了更具体的选择器，比如
p::selection，权重更高，把你全局的::selection覆盖了
排查方法：选中一段文字，在 DevTools 的 Styles 面板里搜 ::selection，看有没有规则显示出来；再往上逐级检查 computed styles 中的 user-select 值。
::-webkit-selection 和 ::selection 必须同时写且内容一致
只写 ::selection 在 Chrome、Edge、Safari（尤其 15.3 及更早）里大概率失效。WebKit/Blink 内核浏览器强制要求显式声明 ::-webkit-selection，且两个规则的声明必须完全相同——包括属性顺序、值写法（比如都用 #ff6b6b，别一个用 rgb() 一个用十六进制）。
- Firefox 现代版已废弃
::-moz-selection，不用再写 -
::-webkit-selection建议放在前面，::selection放最后作为标准兜底 - PostCSS autoprefixer 默认不处理这两个伪元素，如果用了构建工具，得确认它没把
::-webkit-selection给删掉
::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
真正难处理的不是怎么写，而是当用户长按唤起系统级选择菜单时，iOS 会强制使用浅灰背景，此时 ::selection 完全不生效——这是系统行为，CSS 无权干预。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
