::selection 伪元素生效需满足文本可选、无 user-select:none 限制、全局作用域声明、同时写 ::-webkit-selection 和 ::selection（前者在前）、仅用 color/background-color 等兼容属性，且 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 和 ::selection
现代 Firefox 已支持标准 ::selection，但 Safari（包括 iOS）至今不认，Chrome/Edge 也依赖前缀才能稳定生效。
立即学习“前端免费学习笔记（深入）”；
- 必须同时写两份：
::-webkit-selection和::selection，顺序不能反——::-webkit-selection必须在前 - 不要合并在一行用逗号分隔，比如
::selection, ::-webkit-selection在 Safari 中会失效 -
::-moz-selection已废弃，Firefox 91+ 只认标准写法，加了反而冗余 - 所有规则必须写在全局作用域，不能嵌套在
.class或#id里，否则 Safari 和旧版 Chrome 不识别
input 和 textarea 无法用 ::selection 控制
它们走操作系统原生主题，CSS 完全无效——这不是 bug，是规范限制。
- iOS 长按时弹出的系统级选择菜单，固定为浅灰色背景，
::selection样式无解 - 想统一视觉？只能放弃控制，或改用可编辑的
div[contenteditable]替代（但需自行处理焦点、光标、粘贴等逻辑） - 暗色模式下，固定色值极易对比度不足，必须配合
@media (prefers-color-scheme: dark)手动重写整套::selection规则
最常被忽略的是 Safari 的前缀顺序和表单控件的“不可控”——这两处不提前在真机上验证，上线后用户反馈选中文本突然变黑或完全没反应，排查起来特别费时间。
