CSS伪元素::selection自定义_修改网页文字选中颜色

用::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 伪元素只是表层染色，别指望它替代逻辑。