直接用 ::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，其实是没设文字色。
