::selection生效需满足文本可选、样式未被覆盖或限制；常见失效原因包括父元素设user-select:none、scoped css/shadow dom隔离、更具体选择器覆盖；仅color和background-color必写且稳定支持，text-shadow等部分支持，font-size等完全无效；跨浏览器必须同时声明::-moz-selection、::-webkit-selection和::selection三者并分离书写，移动端及input/textarea基本不支持。
::selection 能生效，但只在文本可被选中、且样式没被覆盖或限制的前提下——写对只是第一步，真正卡住人的是 user-select、作用域、浏览器前缀和移动端系统级接管。
为什么写了 ::selection 却完全没反应
不是语法错，而是伪元素压根没触发。常见原因有三个：
• 父元素（哪怕只是 body）设置了 user-select: none，文本根本不能被选中
• 用了 scoped CSS（如 Vue 的 <style scoped></style>）或 Shadow DOM，::selection 规则被隔离失效
• 更具体的选择器（比如 article p::selection）覆盖了你的全局规则，而你没在 DevTools 的 Styles 面板里看到它被应用
::selection 只支持哪些属性，哪些写了也白瞎
它只稳定支持两个属性：color 和 background-color，缺一不可。
• text-shadow：Firefox 支持，Chrome/Safari 大部分版本忽略，Safari 15.4+ 才开始认
• cursor、outline：理论上允许，但极少用，且兼容性不一
• font-size、border、padding、background-image、transform：全部无效，浏览器静默丢弃，不报错也不提示
• 别在 background-color 里用 rgba()——旧版 Safari 渲染异常，优先用十六进制不透明值，比如 #3b82f680
跨浏览器写法必须带 ::-webkit-selection，顺序不能乱
现代 Firefox 已支持标准 ::selection，但 Safari（包括 iOS）至今不认，Chrome/Edge 也依赖前缀才能稳定生效。
• 必须同时写三份（含已废弃但仍有残留影响的 ::-moz-selection）：
::-moz-selection { color: white; background-color: #007acc; }<br>::-webkit-selection { color: white; background-color: #007acc; }<br>::selection { color: white; background-color: #007acc; }
•
::-moz-selection 必须放最前，否则会被后续规则覆盖；::selection 放最后作兜底• 不要指望
@supports 检测它，这个伪元素不支持条件查询
移动端和表单控件是硬伤，得提前接受限制
iOS 长按时弹出的系统级选择菜单，完全无视 ::selection，背景固定为浅灰色，CSS 无解。
• <input> 和 <textarea></textarea> 基本不响应自定义选中色——Chrome 99+ 对 textarea 有弱支持，Firefox 和 Safari 几乎无视
• 深色模式下，别只靠 @media (prefers-color-scheme: dark) 包裹 ::selection，某些浏览器切换主题后不会重绘已选中文本，稳妥做法是 JS 动态切换 document.documentElement 上的 CSS 变量
• 如果项目用了 Ant Design 等 UI 库，它们常悄悄重置 body 的 user-select，得手动再覆盖一遍
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
