::selection 必须同时写 ::selection 和 ::-webkit-selection 才能跨浏览器生效，且需显式设置 color 与 background-color；user-select: none、作用域隔离、高权重选择器会拦截，input/textarea 及 iOS 系统菜单下基本无效。
::selection 必须同时写 ::selection 和 ::-webkit-selection 才能跨浏览器生效，只设 background-color 或只写一个伪元素基本没用。
为什么写了 ::selection 却完全不生效
不是语法错误，而是伪元素根本没被触发。最常遇到的三个硬性拦截点：
- 父容器或自身设置了
user-select: none—— 文本不能被选中，::selection就不会运行 - 写在
<style scoped>（如 Vue）或 Shadow DOM 里 —— 作用域隔离导致规则不穿透、直接失效 - 页面某处有更具体的选择器，比如
p::selection或.article::selection，权重更高，覆盖了你写的全局::selection
排查方法：选中一段文字，在 DevTools 的 Styles 面板里搜索 ::selection，看有没有规则显示；再逐级检查 computed styles 中的 user-select 值是否为 none。
::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 写错了，是浏览器有意限制：
- Chrome 下
input[type="text"]基本不响应::selection；textarea部分生效但行为不一致 - 某些旧版 Safari 甚至把
textarea里::selection的color当背景色渲染 - 想统一控制，只能用
contenteditable="true"替代input（需自行处理值同步、焦点、a11y） - iOS 系统级长按唤起的选择菜单会强制使用浅灰背景，此时
::selection完全不生效 —— 这是系统行为，CSS 无权干预
兼容写法必须三份并列，且顺序有讲究
现代 Firefox 已原生支持 ::selection，但 Safari（含 iOS）和 Chrome/Edge 仍依赖前缀才能稳定生效：
::-moz-selection { color: white; background-color: #007acc; }
::-webkit-selection { color: white; background-color: #007acc; }
::selection { color: white; background-color: #007acc; }
::-moz-selection 必须放在最前，否则会被后续规则覆盖；::selection 放最后作兜底。不要指望 @supports 检测它 —— 这个伪元素不支持条件查询。
真正难处理的不是怎么写，而是当用户长按唤起系统级选择菜单时，iOS 会强制接管样式；还有深色模式下已选中文本不会实时重绘。关键动作就三步：写对两个伪元素、显式声明两个颜色、避开那些“看起来能用但其实废”的属性。剩下全是环境干扰，得一个个排除。
