Chrome中::selection不生效需先检查user-select是否为none，必须显式设置user-select:text；仅color、background-color等少数属性有效；Safari需用::-webkit-selection前缀；样式须作用于含文本的元素而非body。
Chrome里::selection不生效？检查是否漏了user-select: text
默认情况下，::selection只对可被用户选中的文本起作用。但某些元素（比如div、span加了display: flex或position: absolute后）可能被浏览器隐式设为user-select: none，导致样式完全不触发。
- 先确认目标元素的
user-select计算值不是none，用开发者工具的Computed面板查 - 显式写上
user-select: text最稳妥，尤其在自定义组件或重置过全局样式的项目中 - 注意：
user-select: all也能触发::selection，但会强制全选整块内容，体验未必好
::selection支持哪些CSS属性？别试font-size或text-shadow
这个伪元素能用的样式非常有限，仅限于文字渲染相关的几个基础属性。其他任何试图“改变文字形态”的声明都会被忽略，连警告都不报。
- 允许的属性只有：
color、background-color、background-image（部分浏览器）、text-shadow（Chrome 120+ 支持，但 Safari 完全不支持） -
font-weight、font-size、letter-spacing、transform—— 全部无效，写了也白写 - 背景图在 Firefox 中支持较弱，建议优先用纯色
background-color保底
跨浏览器兼容性差异：Safari 的::selection必须带前缀
Safari（包括 macOS 和 iOS）至今要求使用::-webkit-selection，标准写法::selection在它身上直接失效。这不是 bug，是明确的实现差异。
- 必须同时写两份规则，且
-webkit-版本要放在前面，否则 CSS 优先级可能导致覆盖异常 - 示例：
::-webkit-selection { color: white; background-color: #007acc; } ::selection { color: white; background-color: #007acc; } - 不要指望
@supports检测::selection，它不支持条件查询，只能靠前缀兜底
为什么给body设::selection没用？作用域只对“可选中文本”生效
::selection不是全局样式，它不会继承，也不作用于空元素或没有文本内容的容器。把样式写在body或html上，等于什么都没设。
立即学习“前端免费学习笔记（深入）”；
- 必须作用于实际包含文本的元素，比如
p、h1、article，或明确设置了content的::before/::after - 如果想统一整页效果，最简单的是写成
p::selection, h1::selection, li::selection { ... }，别偷懒只写*::selection（性能差且不可靠） - 动态插入的文本（如 React 渲染后的内容）只要 DOM 节点存在、有文本节点，
::selection就自动生效，无需额外操作
真正麻烦的是嵌套内联元素里的选择行为——比如span里包着em再包strong，不同浏览器对高亮边界的处理不一致，这时候颜色看起来会“断开”。这种细节没法靠 CSS 修，得靠结构简化来规避。