::selection 无效的主因是浏览器未执行该规则，常见于父容器设 user-select: none、规则嵌套在@media或类选择器内、CSS-in-JS作用域限制；必须同时声明::-webkit-selection与::selection且属性完全一致；仅支持color、background-color等极少数属性。
为什么写了::selection却完全没反应
不是语法写错了，而是浏览器压根没执行这条规则。最常见原因有三个：
• 父容器（哪怕只是 body）设置了 user-select: none，文本根本不可选，伪元素无从触发
• 把规则写在 @media 块里、或嵌套在 .class / #id 选择器内部，Safari 和旧版 Chrome 直接忽略，必须是顶层独立声明
• 用了 CSS-in-JS（如 Emotion、styled-components），样式被注入局部作用域，::selection 不穿透；得用 injectGlobal 或手动插入 到 document head
::-webkit-selection 和 ::selection 必须同时写且内容一致
只写 ::selection 在 Safari、Chrome、Edge（Chromium 内核）里大概率失效。WebKit/Blink 浏览器强制要求显式声明 ::-webkit-selection，且两个规则的属性名、值写法必须完全相同：
• 都用十六进制色值（如 #3b82f6），别一个用 rgb() 一个用 hex
• ::-webkit-selection 建议放前面，::selection 放最后作标准兜底
• PostCSS autoprefixer 默认不处理这两个伪元素，如果用了构建工具，得确认它没把 ::-webkit-selection 给删掉
::selection 只认 color 和 background-color，其他全被静默丢弃
它不是普通选择器，浏览器只接受极少数视觉属性，其余一律不解析：
✅ 安全可用：color、background-color（推荐用十六进制，避免 rgba() 或 hsl() 在 Safari 渲染异常）
⚠️ 有条件支持：text-shadow（Chrome/Firefox 支持好，Safari 15.4+ 才支持）
❌ 明确无效：font-size、padding、border、opacity、transform、background（注意：必须写 background-color，写 background 可能失效）
• color 和 background-color 建议成对设置，只设一个容易导致文字“消失”（比如深色背景上只设 background-color，文字继承黑色就看不清）
想给不同区块设不同高亮色，得靠选择器层级控制
::selection 不继承、也不跨元素混合；它始终作用于被选中文本所在的具体宿主元素：
• 全局统一：::selection { background: #ffcc00; color: #333; }
• 只对段落生效：p::selection { background: #ffcc00; color: #333; }
• 代码块特殊处理：pre::selection, code::selection { background: #2d2d2d; color: #f8f8f2; }
• 引用区块单独配色：.quote blockquote::selection, .quote cite::selection { color: #666; }
• 跨区块选中时，颜色由起点所在元素的最近有效规则决定，不是按区域拼接
移动端（尤其是 iOS Safari）对 ::selection 的支持仍不稳定，长按选词常被系统级高亮覆盖；别把它当关键交互依赖，必要时配合 document.getSelection() 做 JS 层兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
