::selection 必须同时写 ::selection 和 ::-webkit-selection 才生效，且仅 color 和 background-color 有效；user-select: none、作用域限制、选择器权重不足是三大失效原因，input/textarea 支持差，ios 系统级选中不可控。
::selection 必须同时写 ::selection 和 ::-webkit-selection 才能在 Chrome/Safari/Edge 生效，只写一个基本没用。
为什么写了 ::selection 却完全不生效
不是语法错，而是浏览器压根没触发这个伪元素。最常遇到的三个原因：
- 父容器或自身设置了
user-select: none—— 文本根本不能被选中，::selection就没机会运行 - 写在
<style scoped></style>（如 Vue）或 Shadow DOM 里 —— 它不穿透作用域，直接被忽略 - 页面某处写了更具体的选择器，比如
p::selection，而你的全局::selection权重不够，被覆盖了
排查方法：选中一段文字，在 DevTools 的 Styles 面板里搜 ::selection，看有没有规则显示出来；再往上逐级检查 computed styles 中的 user-select 值。
::selection 只认 color 和 background-color 这两个属性
其他属性哪怕写进去也白搭，浏览器会静默丢弃，不报错也不提示：
- ✅ 必须显式设置的两个：
color（文字色）、background-color（背景色）——缺一不可 - ⚠️
text-shadow：Firefox 支持，Chrome/Safari 大部分版本忽略；Safari 15.4+ 才开始认 - ❌ 完全无效：
font-size、border、padding、background-image、transform、opacity、calc()计算值
别用 rgba() 或 hsl() 带 alpha 的颜色值 —— Safari 渲染不稳定，深色背景上可能发灰或透明，优先用十六进制不透明值，比如 #3b82f6 而非 rgba(59, 130, 246, 0.3)。
input 和 textarea 里改不了选中色
这不是你 CSS 写错了，是浏览器有意限制：
- 原生表单控件对
::selection的支持极不稳定。Chrome 下input[type="text"]基本不响应，textarea则部分生效但行为不一致 - 某些旧版 Safari 甚至把
textarea里::selection的color当背景色渲染 - 想统一控制，只能用
contenteditable="true"替代input（需自行处理值同步、焦点、a11y）
真正难处理的不是怎么写，而是当用户长按唤起系统级选择菜单时，iOS 会强制使用浅灰背景，此时 ::selection 完全不生效 —— 这是系统行为，CSS 无权干预。
复杂点在于：它既不是纯样式问题，也不是兼容性补丁能一劳永逸的事。关键动作就三步：写对两个伪元素、显式声明两个颜色、避开那些“看起来能用但其实废”的属性。剩下全是环境干扰，得一个个排除。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
