::selection伪元素不继承父级color，必须显式设置color和background-color；仅支持有限属性，需加私有前缀兼容旧浏览器，深色模式下须手动适配以保证可读性。
selection伪元素不继承父级color，必须单独设置
很多人写 ::selection 时直接复制父元素的 color 值，结果发现没生效——因为 ::selection 是独立渲染层，完全不继承任何颜色属性（包括 color、background-color，甚至 opacity 都受限）。它只接受有限的 CSS 属性，且浏览器默认会用系统高亮色覆盖未声明的部分。
- 必须显式声明
color和background-color，缺一不可 -
color控制选中文字的前景色，background-color控制背景色 - 不支持
border、box-shadow、font-weight等多数装饰性属性 - Chrome/Edge 支持
text-shadow，但 Firefox 完全忽略
跨浏览器兼容写法要加私有前缀
虽然现代浏览器基本支持标准 ::selection，但 Safari 15.4 之前、旧版 Edge 和部分安卓 WebView 仍依赖 ::-webkit-selection。Firefox 则从 61+ 开始弃用 ::-moz-selection，只认标准写法——但为保底，仍建议双写。
- 优先写标准语法：
::selection - 紧跟私有前缀：
::-webkit-selection（覆盖 Safari、Chrome、旧 Edge） - 避免单独写
::-moz-selection，除非需兼容 Firefox - 两个规则必须完全一致，否则容易因层叠顺序出错
::selection,
::-webkit-selection {
color: #fff;
background-color: #007acc;
}
全局设置和局部覆盖的优先级容易混淆
::selection 的样式作用域是“当前选择发生处的元素及其后代”，不是全局强制。如果某段文字在 <span class="special"></span> 里，而你只给 body::selection 设了颜色，那这个 <span></span> 里的选中效果仍可能被其父容器或自身更具体的规则覆盖。
- 局部规则优先级高于全局：比如
p::selection>body::selection - 想让某个区域不响应全局设置？给它单独设
color: inherit或透明背景 - 注意：不能用
!important在::selection里强行提权，多数浏览器会忽略 - 动态内容（如 Vue/React 渲染后插入的文本）同样适用，无需额外处理
深色模式下选中文本易看不清，需要主动适配
很多网站在深色模式下只改了背景和文字色，却忘了同步更新 ::selection。结果用户一选中，蓝色背景配浅灰文字（或白色文字配浅蓝背景），对比度极低，根本看不清。
- 不要依赖系统自动适配；CSS
@media (prefers-color-scheme: dark)必须手动包裹::selection规则 - 推荐最小对比度：文字与背景色差至少 4.5:1（可用
color-contrast()实验性函数辅助，但目前仅 Safari 支持） - 避免纯黑
#000或纯白#fff作为选中背景，容易刺眼；用#2a5b8c这类带灰度的深蓝更稳妥
真正麻烦的是：选中状态本身没有伪类可监听，无法用 JS 动态切换。所以所有适配必须靠 CSS 媒体查询预置好。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
