::selection仅支持color、background-color、text-shadow等极少数css属性，其余如font-weight、border等被静默忽略；chrome/firefox/edge支持良好，safari 15.4+才开始支持；需搭配color或background-color才能生效，不可嵌套；优先级依赖选择器特异性，局部覆盖需用pre::selection等更具体写法；移动端兼容性差，ios常被系统高亮覆盖；需手动校验对比度并适配深色模式。
selection伪元素不支持所有CSS属性
直接用 ::selection 改颜色看似简单，但很多开发者试了发现没效果——根本原因是它只接受极少数CSS属性，比如 color、background-color、text-shadow，其余像 font-weight、border、padding 全部被忽略。
浏览器会静默丢弃不支持的声明，不会报错，所以你改了但看不见变化，容易误以为是选择器写错了。
-
::selection在 Chrome/Firefox/Edge 中生效，但 Safari 15.4+ 才开始支持（旧版 Safari 完全无视） - 必须搭配
color或background-color才能触发渲染，光写text-shadow不会高亮变色 - 不要嵌套写法，
p::selection span这类无效；只能作用于被选中的文本直接所在的元素
全局设置和局部覆盖怎么写才不冲突
全局统一配色用 ::selection，但某些区域（比如代码块、引用段落）需要不同高亮色，就得用更具体的选择器覆盖。关键是优先级和继承规则：
- 默认写在
:root或body下的::selection是最低优先级 - 想局部改，必须用带标签或 class 的前缀，比如
pre::selection、.quote::selection - 注意：
pre::selection只影响<pre class="brush:php;toolbar:false;"></pre>内被选中的文本，不影响其子元素里其他标签的选中行为
示例：
/* 全局默认 */
::selection {
background-color: #ff9e6d;
color: #fff;
}
<p>/<em> 代码块里反白显示 </em>/
pre::selection {
background-color: #2d2d2d;
color: #f8f8f2;
}</p>
移动端 selection 行为和兼容性陷阱
在 iOS Safari 和部分安卓 WebView 中，::selection 效果常被系统级文字高亮覆盖，尤其是长按选词时——你的 CSS 可能完全不生效。
- iOS 16+ 开始部分支持，但仅限于
color和background-color，且必须配合-webkit-user-select: text显式开启可选 - Android Chrome 大多支持，但 WebViews（尤其老版本）可能直接忽略
::selection - 别依赖它做关键信息提示，比如“选中即复制”这类交互，要用 JS +
document.getSelection()辅助判断
color 和 background-color 的对比度要手动检查
浏览器不会帮你校验可访问性。用户选中文本后，如果 color 和 background-color 对比度太低（比如浅灰字配米白底），文字就看不见了。
- WCAG AA 级要求文本对比度 ≥ 4.5:1，工具可用
axe-devtools或在线 contrast checker - 深色模式下尤其危险：全局设了
background-color: #333，但没同步改color，结果黑底上选中文字还是黑色 - 推荐用
prefers-color-scheme媒体查询做响应式 fallback：@media (prefers-color-scheme: dark) { ::selection { background-color: #4a5568; color: #fff; } }
真正麻烦的是跨浏览器渲染差异——Chrome 里看着正常，Firefox 可能因字体抗锯齿策略不同导致边缘发虚，这种细节没法靠 CSS 修，得接受它本来就不精确。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
