::selection需同时声明color和background-color并配::-webkit-selection才生效，失效主因是user-select:none、作用域隔离或选择器权重冲突，且仅支持有限属性，iOS系统级菜单下完全无效。
::selection 能改，但只写它大概率没反应——必须同时声明 color 和 background-color，且得配好兼容写法，否则 Safari、旧 Chrome 里直接失效。
为什么 ::selection 常常不生效
不是语法错，是浏览器压根没触发这个伪元素。常见原因有三个：
- 父容器或自身写了
user-select: none—— 文本根本不能被选中，::selection就没机会运行 - 规则写在
（如 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() 一个用十六进制）。
::-moz-selection 已被现代 Firefox 废弃，不用再写；但如果你还要支持 Firefox ESR 或极老版本，可保留，否则删掉更干净。
PostCSS autoprefixer 默认不处理这两个伪元素，如果用了构建工具，得确认它没把 ::-webkit-selection 给删掉。
::selection 只认 color、background-color 和 text-shadow
它不是普通选择器，设了 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 无权干预。用户长按文本后弹出的“复制/分享”菜单区域，iOS 会强制使用浅灰色背景，此时无论你怎么写 ::selection 都不会渲染。这不是 bug，是平台限制，截至 2026 年 9 月仍无绕过方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
