::selection 必须同时声明 color 和 background-color 才生效，仅写其一常失效；不继承父级颜色，不支持 border/font-size 等属性，且 input/textarea 中基本无效。
直接写 ::selection 就能改，但只对普通文本生效，且必须同时声明 color 和 background-color，否则可能看不见效果。
为什么只写 ::selection 有时完全没反应
不是语法错，而是浏览器根本不触发这个伪元素。常见原因有三个：
- 父容器设置了
user-select: none—— 文本压根不能被选中，::selection就没机会运行 - 你在 scoped CSS（如 Vue 的
<style scoped></style>）或 Shadow DOM 里写了::selection—— 它不穿透作用域，会被忽略 - 页面某处写了更具体的选择器，比如
p::selection，而你的全局::selection权重不够，被覆盖了
排查方法：选中一段文字，在 DevTools 的 Styles 面板里搜 ::selection，看有没有规则显示出来；再往上逐级检查 computed styles 中的 user-select 值。
::selection 能设什么、不能设什么
它只接受极少数属性，多了就静默失效，不会报错也不会提示：
- ✅ 必须显式设置的两个：
color（文字色）、background-color（背景色）—— 缺一不可，否则可能黑字黑底或白字白底 - ⚠️ 有条件支持：
text-shadow（Firefox 支持，Chrome/Safari 大部分版本忽略；Safari 15.4+ 才开始认） - ❌ 完全无效：
font-size、border、padding、background-image、transform、opacity、CSS 变量计算值（如calc(--primary * 0.8)）
别在 ::selection 里试 rgba() 半透明色——部分 Safari 版本会降级为纯色或发灰，优先用十六进制不透明值，比如 #3b82f6 而非 rgba(59, 130, 246, 0.3)。
input 和 textarea 里的文字能用 ::selection 控制吗
基本不能。Chrome/Firefox 对 input::selection 和 textarea::selection 支持极差，Safari 更是几乎无视。这不是你漏写了前缀，是浏览器有意限制：
- 原生表单控件的选中态由操作系统级渲染逻辑控制，CSS 层面无法可靠干预
- 即使加了
::-webkit-selection，也只在部分 Chrome 版本下对textarea有微弱响应，input[type="text"]基本无效 - 某些旧版 Safari 甚至会把
color当成背景色渲染，造成颜色错乱
真要统一风格，要么放弃定制、接受系统默认，要么用 contenteditable="true" 替代 input（需自行处理值同步、a11y、焦点管理），代价很高。
移动端和深色模式下的真实表现
iOS Safari 是最大变量：长按触发系统级选择菜单时，::selection 样式完全不生效，系统强制用浅灰背景；Android WebView（尤其微信 X5 内核）可能直接忽略整个伪元素。深色模式下，@media (prefers-color-scheme: dark) 对 ::selection 无效，浏览器不会自动切换。
可行做法是手动定义两套规则，并用 JS 切换 data-theme：
::selection { background-color: #4a90e2; color: white; }
:root[data-theme="dark"] ::selection { background-color: #374151; color: #f9fafb; }
但要注意：切换主题后已选中的文本不会重绘，用户得取消再选一次才生效。最常被忽略的复杂点，其实是 Safari 对 ::-webkit-selection 的依赖和 input 类控件的“不可控”——这两处不提前在真机上测，上线后反馈最多的就是“选中变黑”和“点不动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
