::selection 要生效需同时写 ::-webkit-selection 和 ::selection 且内容一致，仅支持 color 和 background-color，受 user-select、作用域、浏览器兼容性等多重限制。
::selection 要真正生效，不是写对语法就行，而是得绕过浏览器一堆默认拦截和作用域陷阱。它大概率“不生效”，不是你漏了分号，而是被 user-select: none、<style scoped>、或 iOS 系统级菜单直接废掉了。
为什么写了 ::selection 却完全没反应
不是 CSS 写错了，是选中行为根本没触发：
-
user-select: none写在父容器（哪怕只是body）或自身上——文本压根不能被选，伪元素自然不运行 - 用 Vue 的
<style scoped>或 Shadow DOM 包裹——::selection不穿透作用域，样式被丢弃 - 页面里有更具体的选择器，比如
p::selection或.article::selection，权重高于全局::selection，把你写的规则覆盖了 - 用了 CSS-in-JS 库（如 styled-components）动态注入样式——前缀被删、作用域隔离、或规则没挂到
<head>，导致无效
排查方法：选中一段文字 → 打开 DevTools → 在 Styles 面板搜索 ::selection，看有没有匹配规则；再往上点 computed styles，检查 user-select 是否为 none。
::-webkit-selection 和 ::selection 必须同时写且内容一致
只写 ::selection 在 Chrome、Edge（Chromium）、新版 Safari 里大概率失效。WebKit/Blink 内核浏览器强制要求显式声明 ::-webkit-selection，且两个规则的声明必须完全相同：
立即学习“前端免费学习笔记（深入）”；
- 属性名、值写法（比如都用
#3b82f6，别一个用rgb()一个用 hex）必须一致 -
::-moz-selection已废弃，Firefox 100+ 只认::selection，不用加 -
::-webkit-selection建议放在前面，::selection放最后作标准兜底 - PostCSS autoprefixer 默认不处理这两个伪元素，如果用了构建工具，得确认它没把
::-webkit-selection给删掉
正确写法示例：
::-webkit-selection { color: white; background-color: #3b82f6; }
::selection { color: white; background-color: #3b82f6; }
::selection 只认 color 和 background-color，其他全被静默忽略
它不是普通选择器，规范只允许修改极少数属性：
- 必须同时设置的两个：
color（文字色）、background-color（背景色）——缺一不可。只设background-color时，文字可能继承默认黑色，在深色背景上直接“消失” - 有条件支持：
text-shadow（Firefox 和 Chrome 支持；Safari 15.4+ 才开始认），cursor（仅悬停时生效，极少用） - 明确不支持：
font-size、padding、border、opacity、transform、background（注意不是background-color） - 避免用
hsl()或带 alpha 的rgba()——Safari 渲染不稳定，深色背景上可能变灰或透明；优先用十六进制值
移动端和暗色模式下容易被忽略的限制
这些限制在开发时几乎不会报错，但上线后才暴露：
- iOS Safari 15.4 之前、Android WebView 等环境会忽略纯
::selection，必须双写前缀 - 某些 UI 框架（如 Ant Design）重置了全局
::selection，颜色设为transparent或继承值，需显式覆盖 -
@media查询内部写::selection会被 Safari 忽略，必须作为顶层规则书写 -
<input>和<textarea>默认不响应::selection，得额外加user-select: text激活
最常被忽略的是：你改了样式，但用户在 iPhone 上长按选中时，系统弹出的是原生菜单，高亮样式根本不走 CSS 流程——这时候 ::selection 就是摆设。
