CSS选中文本颜色修改技巧

CSS 的 `::selection` 伪元素是专门用于自定义用户选中文本样式的强大工具，但其能力极为受限——仅稳定支持 `color` 和 `background-color` 两个属性，不继承父级文本颜色，也不响应 `font-size`、`text-shadow` 等常见样式；它在深色模式适配、品牌色统一等场景中价值突出，却在移动端（尤其是 iOS Safari）存在严重兼容性问题，甚至可能完全失效；实际开发中必须显式声明颜色对、兼顾 `::-moz-selection` 兼容性、警惕 `user-select: none` 的干扰，并清醒认识到它无法替代 JavaScript 实现复杂选中交互——理解这些边界，才能避免无谓调试，高效达成可读、一致且稳健的选中体验。

selection伪元素不继承父元素颜色

直接给 ::selection 设置 color 时，发现文字没变色？大概率是父容器用了 color: transparent 或 color: inherit 且上下文里没显式定义文本色。::selection 不会自动从父级“拿”颜色，它只响应自己声明的 color 和 background-color，其他 CSS 属性（比如 font-weight）会被忽略。

常见错误现象：
- 页面全局设了 * { color: #333; }，但 ::selection 仍显示浏览器默认蓝底白字
- 使用深色主题时，选中文字变成黑底黑字（不可见），因为没显式设 color

实操建议：
- 必须为 ::selection 显式声明 color 和 background-color
- 推荐同时写 ::-moz-selection（Firefox 旧版本兼容）
- 避免依赖继承，哪怕父级已设 color，也要在 ::selection 里重写

color和background-color是仅有的两个有效属性

很多人试过在 ::selection 里加 text-shadow、border、font-size，结果全无效——这是规范限制，不是浏览器 bug。CSS Selectors Level 3 明确规定，::selection 只支持 color、background-color、cursor、outline、text-decoration 等极少数属性，但实际只有前两个被所有主流引擎稳定支持。

使用场景：
- 深色模式下提高可读性：选中文字用浅色 + 高对比度背景
- 品牌一致性：把选中高亮色换成主色调（比如蓝色品牌用 #2563eb 作背景）

实操建议：
- 别浪费时间调试 text-shadow 在 ::selection 中的表现
- background-color 推荐用不透明色值（如 #3b82f680），避免与页面背景叠加出意外灰度
- Safari 对 background-color 的 alpha 通道支持略弱，必要时可用十六进制不透明色兜底

全局设置 vs 局部覆盖要分清作用域

::selection 是全局伪元素，但它的样式会受选择范围的 DOM 位置影响。比如给某个