chrome中::selection不生效需同时声明::selection和::-webkit-selection；仅后者为webkit/blink浏览器必需，firefox仅认前者；该伪元素仅支持color、background-color等有限样式，且input/textarea内支持不稳定。
Chrome里::selection不生效？检查是否漏了::-webkit-selection
Chrome、Edge、Safari这些基于WebKit/Blink的浏览器，必须显式写::-webkit-selection才能覆盖默认选中样式；只写标准::selection会被忽略。
常见错误现象：CSS写了::selection { color: #fff; background: #007bff; }，但在Chrome里选中文本颜色还是蓝底黑字。
- 必须同时声明两个伪元素，顺序无关，但缺一不可
-
::-webkit-selection不是前缀“可选”，而是当前事实上的必需项 - Firefox只认
::selection，不用加-moz-前缀（早年需要，现在已废弃）
::selection {
color: #fff;
background: #007bff;
}
::-webkit-selection {
color: #fff;
background: #007bff;
}
::selection能改哪些样式？别试没用的属性
它只支持有限的几个CSS属性，超出范围的声明会被直接丢弃，且不会报错——你根本看不出哪里错了。
使用场景：品牌色统一（比如官网所有文本选中时都用主色调）、可访问性优化（提高对比度）、隐藏敏感信息（如密码框选中时不显示明文色）。
- 允许的属性只有：
color、background-color、cursor、outline、text-shadow -
font-weight、border、transform这类完全无效 -
background-image虽在规范中未禁止，但实测多数浏览器忽略
为什么input和textarea里的文字选中色改不了？
原生表单控件对::selection的支持极不稳定。Chrome下input[type="text"]基本不响应，textarea则部分生效但行为不一致。
这不是你CSS写错了，是浏览器有意限制——出于安全与UX一致性考虑，表单内选中态由系统级渲染控制。
- 想统一控制，只能用
contenteditable替代input（需自行处理值同步、焦点、a11y） - 或放弃定制，接受系统默认（更稳妥）
- 某些旧版Safari甚至会把
textarea里::selection的color当背景色渲染
全局设置::selection时，深色模式适配容易被忽略
如果你的网站支持深色模式，仅靠@media (prefers-color-scheme: dark)包裹::selection可能不够——有些浏览器（特别是移动端Safari）在切换系统主题后不会重绘已选中文本。
真正起效的方式是：把深色模式下的规则也单独写一遍，并确保它们在CSS中位于常规规则之后（避免被覆盖）。
- 不要只依赖媒体查询动态计算颜色，提前定义好两套明确值
- 测试时务必手动选中文本，再切深色模式，看是否实时更新
- Android Chrome对
prefers-color-scheme+::selection的支持仍不完善，有缓存残留风险
复杂点在于：它既不是纯CSS变量问题，也不是伪元素作用域问题，而是浏览器渲染管线里一个被长期边缘化的角落——改得动，但改得稳，得挨个环境试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
