::selection 仅支持 color 和 background-color 两个属性，不继承父元素颜色，需显式声明；其他属性如 text-shadow、font-size 等无效，且移动端（尤其 iOS Safari）支持有限。
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 位置影响。比如给某个 单独写了 article::selection { color: red; }，那只有选中该 内容时才生效；而 ::selection（无前缀）是整个页面的兜底规则。
常见错误现象：
- 在组件 scoped CSS 里写了 ::selection，结果其他区域也被影响
- 给 button 单独设 button::selection，但按钮内文字根本不能被用户选中（user-select: none）
实操建议：
- 全局统一风格，优先用 ::selection 和 ::-moz-selection
- 局部差异化（如代码块内选中变黄底），用具体选择器限定范围，例如 pre code::selection
- 注意检查目标元素是否设置了 user-select: none 或 -webkit-user-select: none，否则样式再对也看不到效果
移动端 Safari 的 selection 行为差异
iOS Safari 默认禁用大部分 ::selection 样式，尤其在输入框、可编辑区域外，即使写了 ::selection 也可能完全不渲染。这不是 bug，是 WebKit 的策略：为了减少触摸交互时的视觉干扰。
性能 / 兼容性影响：
- iOS 15+ 开始部分支持 background-color，但 color 仍可能被忽略
- Android Chrome 支持度好得多，基本和桌面版一致
实操建议：
- 不要指望移动端靠 ::selection 实现精细视觉控制
- 如果必须提示用户“已选中”，改用 JS 监听 selectionchange 事件，动态加 class 控制周边 UI
- 测试时务必真机验证，模拟器常有误报
容易被忽略的是：selection 伪元素没有盒模型，无法设置 padding/margin，也不能触发 :hover；它只是对当前选中文本的一层“染色覆盖”。想做更复杂的交互反馈，得绕开它另想办法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
