必须同时写 ::-webkit-selection、::-moz-selection 和 ::selection 才能跨浏览器生效，因 Safari 旧版、Firefox 早期版本等仅支持带前缀的语法；还需顶层声明、避开 user-select: none、适配暗色模式。
直接写 ::selection 并不能在所有浏览器中生效，尤其 Safari 旧版、Firefox 早期版本、部分移动端 WebView 会忽略标准语法。必须叠加前缀 + 注意作用域限制，才能真正“统一”。
为什么只写 ::selection 在某些浏览器里没反应
Chrome/Edge 90+ 和 Firefox 68+ 支持标准 ::selection，但 Safari 直到 15.4 才稳定支持（iOS 15.4+ 对应 WKWebView 也才跟上）；更早的 Safari 和旧版 Firefox 只认 ::-webkit-selection 和 ::-moz-selection。单独漏掉任一前缀，对应内核就会回退到系统默认蓝色高亮。
-
::-webkit-selection：必须写，覆盖 Safari、Chrome、Edge（旧版）、iOS/Android WebView -
::-moz-selection：Firefox 67 及更早版本必需；虽新版本已支持标准语法，但保留它无害且保险 - 三者顺序无关，但建议按 -webkit → -moz → 标准排列，方便维护
::selection 不生效的常见场景和解法
即使写了全部前缀，仍可能白写——问题往往出在选择器范围或元素本身不可选。
小红书长文-谷歌浏览器
下载
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
-
user-select: none会彻底禁用文本选择，::selection失效；若需局部禁选，改用user-select: text显式开启可选区域 -
<input>、<textarea></textarea>默认不响应::selection，得额外加input::selection和textarea::selection规则（且仅部分属性生效） - 媒体查询（
@media）内部写::selection会被忽略，必须作为顶层规则书写 - Vue/React 组件中动态插入的样式若未挂载到
<head>，或被 scoped CSS 隔离，也可能导致失效
移动端和暗色模式下的实际表现差异
移动端 Safari 和 Android Chrome 对 ::selection 的支持较桌面端弱：选中反馈延迟、背景色有时被系统级高亮覆盖、text-shadow 基本不渲染。暗色模式下更麻烦——浏览器不会自动适配，你设的 background-color: #007acc 在深色背景上可能对比度不足甚至看不见。
立即学习“前端免费学习笔记（深入）”；
- 务必在深色模式下手动重写：
@media (prefers-color-scheme: dark) { ::selection { background-color: #4a6fa5; color: white; } } - 避免纯黑/纯白文字配浅色背景，用工具测 WCAG 对比度（至少 4.5:1）
- iOS 上长按唤出菜单后选中文本，
::selection样式常被忽略，这是系统限制，无法绕过
最稳妥的做法是：三个前缀全写 + 顶层声明 + 暗色模式单独适配 + 避开 user-select: none 区域。别指望一次定义就能跨所有环境完美一致——WebKit 内核的碎片化和移动端权限限制，决定了它始终是个“尽力而为”的视觉增强，不是强制控制。
