用::selection可设置选中文本的color、background-color等有限样式，需兼容::-moz-selection，注意user-select:none会禁用、移动端支持不稳定且不自动适配暗色模式。
怎么用 ::selection 改文字选中颜色
直接写 CSS 规则就行，::selection 是标准伪元素，现代浏览器基本都支持（IE 不支持，Edge 12+ 开始支持）。它作用于用户鼠标拖拽选中的文本，不是所有元素都响应——比如 <input> 和 <textarea></textarea> 默认不生效，得额外加 ::-moz-selection（旧版 Firefox）或用 user-select: text 激活。
常见错误是只写 ::selection 却没处理兼容性，结果在 Safari 或老 Chrome 里颜色没变。实际只需两行：
::selection {
background-color: #ff6b6b;
color: white;
}
::-moz-selection {
background-color: #ff6b6b;
color: white;
}
::selection 能设置哪些 CSS 属性
能设的非常有限，只允许：color、background-color、cursor、outline、text-decoration、text-shadow。其他像 font-size、padding、transform 全部被忽略，写了也不生效。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
-
background-color必须是半透明或不透明色值，rgba(255, 107, 107, 0.3)可以，但transparent会退回到浏览器默认高亮色 -
text-shadow在深色背景上选中文本时容易看不清，建议搭配color一起调 - 不要试图用
::selection控制选区范围或触发 JS 事件——它纯属样式层，和 DOM 交互无关
为什么有时候 ::selection 完全不生效
最常遇到的是父容器加了 user-select: none，导致子元素根本无法被选中，自然也就触不到 ::selection。另一个隐蔽原因是 CSS 优先级：如果页面某处写了更具体的规则（比如 p::selection），而你全局写的 ::selection 就会被覆盖。
排查步骤：
- 打开 DevTools，选中一段文字，看 Elements 面板右下角的 Styles 标签页里有没有
::selection规则显示出来 - 检查祖先元素是否设置了
user-select: none或pointer-events: none - 确认没有其他同名规则用
!important强行覆盖了你的声明 - 在
<div contenteditable="true"> 这类可编辑区域里，<code>::selection行为可能和普通文本不同，需单独测试移动端和暗色模式下的注意事项
iOS Safari 对
::selection支持不稳定，尤其是配合viewport缩放或字体放大后，有时只高亮部分文字；Android Chrome 相对靠谱，但 WebView（如微信内嵌页）可能完全忽略该伪元素。暗色模式下别只依赖系统配色——
::selection不会自动适配@media (prefers-color-scheme: dark)，得手动写媒体查询：@media (prefers-color-scheme: dark) { ::selection { background-color: #4a5568; color: #e2e8f0; } ::-moz-selection { background-color: #4a5568; color: #e2e8f0; } }真正麻烦的是，有些设计系统把选中态当成功能状态来用（比如代码编辑器里高亮变量引用），这时候仅靠
::selection远不够，得结合 JS 的getSelection()和 DOM 遍历才能精准控制——CSS 伪元素只是表层染色，别指望它替代逻辑。
