::selection没生效最常见原因是被更具体规则覆盖或父容器设了user-select: none；仅支持color、background-color、text-shadow、cursor四属性；需单独写::-moz-selection兼容Firefox；只对可选中文本生效。
为什么 ::selection 设置后没生效
最常见原因是选择范围被更具体的 CSS 规则覆盖，或者父容器设置了 user-select: none。另外，::selection 只能设置 color、background-color、text-shadow 和 cursor 这四个属性，其他如 font-weight 或 border 会被忽略。
实操建议：
- 确保样式写在全局作用域或足够宽泛的选择器下（比如直接写
::selection，而非div::selection前置限定过多） - 检查是否有
!important覆盖了你的规则（尤其来自框架或重置 CSS） - 确认目标元素未设置
user-select: none—— 这会直接禁用文本选中，::selection自然失效 - Chrome/Edge 和 Safari 对
::selection的支持较完整；Firefox 需要加::-moz-selection兼容写法
如何同时兼容 Chrome 和 Firefox
Firefox 不识别标准的 ::selection，必须显式声明 ::-moz-selection，且两者需分开写（不能合并为逗号分隔的选择器，否则整个规则会被 Firefox 忽略）。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
::selection {
background-color: #ff6b6b;
color: white;
}
::-moz-selection {
background-color: #ff6b6b;
color: white;
}
注意：::-moz-selection 不能带空格（比如写成 :: -moz-selection 就无效），也不能和 ::selection 合并在一行用逗号分隔。
::selection 能影响哪些内容
它只作用于**可被用户主动选中的文本内容**，不是所有文字都适用：
- 普通段落、标题、
<span>内的文字：✅ 默认可选，样式生效 - 禁用选中的元素（
user-select: none）：❌ 样式不触发 - 表单控件内文字（如
<input type="text">或<textarea>）：✅ 但部分浏览器（如旧版 Safari）可能忽略自定义背景色，仅支持颜色 - 伪元素生成的内容（
::before/::after）：❌ 无法被选中，::selection对其无效 - Canvas 或 SVG 中的文本：❌ 不走 HTML 渲染管线，该伪元素不适用
性能与可访问性要注意什么
::selection 本身无性能开销，但不当使用会影响可读性：
- 避免低对比度配色（比如浅灰文字 + 浅蓝背景），WCAG 至少要求 3:1 的对比度
- 不要用透明或半透明
background-color，某些浏览器渲染时会出现闪烁或残留 - 深色模式下若未适配，亮色选中背景可能刺眼 —— 可结合
@media (prefers-color-scheme: dark)单独调整 - 移动端长按触发选中时，部分 Android 浏览器对
::selection支持不稳定，建议测试真机
真正容易被忽略的是：选中文本的样式不会继承父级 color 或 background，必须显式声明，哪怕只是想保持默认色也要写上 color: currentColor 或 background-color: highlight。
