::selection 伪元素仅支持 color、background-color、cursor、outline、text-shadow 等有限样式；background-color 必须用纯色（如 #2563eb），禁用渐变、图片及含 alpha 的 rgba；旧版 Chrome/Safari 需加 -webkit- 前缀。
selection伪元素不支持所有CSS属性，别乱加
直接写 ::selection 时，浏览器只认有限几个样式：color、background-color、cursor、outline、text-shadow（部分浏览器）。其他像 font-weight、border、transform 全部无效，写了也白写。
品牌色要用 background-color 落实，但注意：它不能是渐变、图片或透明度值（rgba(0,0,0,0.1) 在 Safari 中会退为默认灰）。稳妥做法是用纯十六进制或 rgb() 值。
- ✅ 推荐：
background-color: #2563eb;（Tailwind 默认的 brand blue） - ❌ 避免：
background-color: rgba(37, 99, 235, 0.2);（Safari 忽略 alpha） - ❌ 避免：
background: linear-gradient(...);（完全不生效）
必须加前缀才能兼容旧版 Chrome 和 Safari
::selection 在 2018 年后才逐步统一，但旧版 Blink（Chrome
实际要写三份：
立即学习“前端免费学习笔记（深入）”；
::selection {
background-color: #2563eb;
color: white;
}
::-moz-selection {
background-color: #2563eb;
color: white;
}
::-webkit-selection {
background-color: #2563eb;
color: white;
}
注意：::-moz-selection 不支持 text-shadow；::-webkit-selection 在 iOS Safari 15.4+ 才真正稳定，低于此版本偶有闪烁。
深色模式下选中色容易和背景打架
如果页面启用了 @media (prefers-color-scheme: dark)，但没给 ::selection 单独配色，用户在深色主题里选中文本，很可能出现蓝底蓝字（background-color: #2563eb + 默认深色文字），根本看不见。
- 必须显式重写深色模式下的
::selection - 别依赖继承——
color不会自动反色，得手动设成白色或浅灰 - 测试时真机切深色模式，模拟器有时不触发渲染更新
示例：
@media (prefers-color-scheme: dark) {
::selection {
background-color: #3b82f6;
color: #f9fafb;
}
::-moz-selection { background-color: #3b82f6; color: #f9fafb; }
::-webkit-selection { background-color: #3b82f6; color: #f9fafb; }
}
全局设置影响第三方组件，小心覆盖
::selection 是全局作用域，一旦定义，会影响所有文本容器——包括 CodeMirror、Monaco Editor、react-select 下拉项，甚至 PDF.js 渲染出的文本层。
某些富文本编辑器内部靠 user-select: none 或 shadow DOM 隔离，但多数 UI 库没做这层防护。
- 如果发现代码块选中后背景突变成品牌蓝，不是 bug，是你自己写的
::selection生效了 - 想局部禁用？只能对特定容器加
user-select: none（但用户就真不能复制了） - 更稳妥的做法：只在
body或主内容区作用域内覆盖，避免写在:root或无限制全局规则里
复杂点在于：你改的是一行 CSS，但影响的是整个渲染树里所有可选中文本节点的行为——而且没法用 !important 拦截第三方组件自己的 ::selection 规则，优先级由源顺序决定。
