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

直接用 ::selection 伪元素设置选中样式，仅支持 color、background-color 等少数属性；需兼容旧版浏览器时加 ::-webkit-selection；注意 overflow/transform、表单控件、优先级及深色模式适配。

怎么用 ::selection 改文字选中颜色

直接写 css 就行，不需要 js 或 HTML 配合。::selection 是个伪元素，作用就是接管用户鼠标拖选或双击选中文字时的样式。它只支持有限的几个 CSS 属性：color、background-color、text-shadow、cursor（部分浏览器），其他像 font-size 或 border 会被忽略。

基础写法：

::selection { background-color: #ff6b6b; color: white; }

注意：没写前缀也能生效，但为了兼容旧版 chrome/safari，建议加 ::-webkit-selection；firefox 从 61+ 开始原生支持标准写法，不用 ::-moz-selection 了（已废弃）。

::selection 不生效的常见原因

不是语法写错，而是被“看不见的规则”拦住了：

• 父容器用了 overflow: hidden 或 transform（比如 scale(0.99)），某些浏览器会切断伪元素继承链
• 选中区域在 <input> 或 <textarea></textarea> 里——这些表单控件有自己的原生选中样式，::selection 对它们无效（得用 ::-webkit-input-placeholder 类似思路，但不通用）
• CSS 优先级不够：如果页面有更具体的规则（比如 div p::selection），而你写了全局的 ::selection，可能被覆盖
• 用了 !important 在别的地方强行锁死了 background-color，而 ::selection 的声明没加 !important（虽然不推荐，但有时真得加）

跨浏览器颜色适配要注意什么

不同浏览器对 ::selection 的默认行为不一致，尤其在深色模式下：

立即学习“前端免费学习笔记（深入）”；

• Safari 会自动把 background-color 调暗一点，哪怕你写了 #ff6b6b，实际看到的可能偏紫；Chrome 更忠实于你写的值
• 如果你设了半透明背景如 rgba(255, 107, 107, 0.3)，Firefox 会渲染成纯色（alpha 被忽略），Safari 和 Chrome 才支持透明度
• 深色网页上，别只依赖 color: white——有些系统级高对比度设置会强制重置文字颜色，导致选中后字看不见

稳妥做法是：用不透明色 + 明确的 color，并在深色主题下单独写一遍：

@media (prefers-color-scheme: dark) { ::selection { background-color: #4a4a4a; color: #fff; } }

为什么不能给 ::selection 加动画或 transition

因为 ::selection 不是真实 dom 节点，没有生命周期，也不触发重排/重绘流程。浏览器只在选中发生瞬间“快照式”应用样式，没有中间状态可插值。

试图写 transition: background-color 0.3s 或 @keyframes 完全无效。如果真需要视觉反馈，得换思路：监听 selectionchange 事件，动态加 class 到容器上，再对那个 class 做动画——但这改的是“容器”，不是选中文本本身。

真正容易被忽略的一点：伪元素样式不会继承父级的 color 或 background，必须显式声明。很多人只写 background-color 忘了 color，结果选中后字变黑压进深色背景里，以为是 bug，其实是没设文字色。