::selection仅支持color、background-color和text-shadow，需全局声明并兼容-webkit-与-moz-前缀，不支持嵌套、!important及表单控件，移动端兼容性受限。
如何用 ::selection 改变选中文本背景色
直接改就行，但浏览器默认只支持有限样式，且不继承父级颜色设置。关键不是“能不能”，而是“哪些能设、哪些会被忽略”。
最常用的是 color、background-color 和 text-shadow，其他如 font-weight、border、transform 一律无效。
-
::selection必须写在全局作用域（不能嵌套在.class或#id里），否则 Safari 和旧版 Chrome 不认 - Firefox 需要加前缀
::-moz-selection，且必须放在标准写法前面，否则被覆盖 - 移动端 Safari 对
background-color支持不稳定，深色背景上选中可能发灰或透明——建议用不依赖亮度的纯色，比如#ff6b6b而非hsl(0, 100%, 80%)
示例：
::-moz-selection {
background-color: #ff6b6b;
color: white;
}
::selection {
background-color: #ff6b6b;
color: white;
}
::selection 为什么有时完全不生效
不是代码写错了，大概率是 CSS 优先级或作用域问题。这个伪元素不参与常规层叠，但它会受选择器权重影响，而且对 HTML 结构敏感。
立即学习“前端免费学习笔记（深入）”；
- 如果父容器设置了
user-select: none，那里面的内容根本无法被选中，::selection自然没机会触发 - React/Vue 组件中动态插入的文本，若用了
dangerouslySetInnerHTML或v-html，需确认样式是否被 scoped 或 CSS-in-JS 意外隔离 - 某些 UI 库（如 Ant Design）会在
body上加user-select: text的反向重置，反而覆盖了你全局定义的::selection—— 检查 computed styles 里的user-select值
能否只对某段文字启用自定义选中样式
不能直接限定作用域，但可以间接控制。因为 ::selection 是全局伪元素，唯一能“局部化”的方式是靠继承和重置。
- 给目标区域加 class，比如
<p class="highlightable">...，然后在::selection规则里用.highlightable::selection？不行 —— 浏览器不支持这种写法 - 可行做法：用
color和background-color做差异化继承。例如默认设为浅蓝背景，再单独给某个<div class="code-block">设置color: #222; background-color: #f8f8f8;，它内部的::selection就会基于这个上下文渲染，视觉上像“专属”效果 - 真要彻底隔离，只能用 JS 拦截
mousedown+selectstart，手动创建浮动层模拟选中态——代价高，仅限特殊交互场景
兼容性与移动端注意事项
桌面端主流浏览器都支持，但 iOS Safari 从 15.4 开始才真正支持 background-color（之前只支持 color）。Android WebView 则要看系统 WebKit 版本，低于 Android 10 的设备大概率失效。
- 不要指望
::selection在<input>或<textarea>里生效 —— 这些控件使用原生渲染，样式由操作系统接管 - CSS 中若用了
!important，在::selection里也无效，别白费劲 - 深色模式下，用户系统级选中色（如 macOS 的蓝色）会和你的
::selection冲突，建议在@media (prefers-color-scheme: dark)里单独配一套柔和对比色，比如background-color: #4a5568
真正麻烦的从来不是怎么写，而是什么时候不该写 —— 比如表单输入、代码高亮块、富文本编辑器，这些地方硬套 ::selection 很容易和底层行为打架。
