::selection仅支持color、background-color等少数属性，firefox需额外写::-moz-selection，ios safari中color无效，必须显式设置半透明背景色并真机测试。
selection伪元素不支持所有css属性
直接用 ::selection 改背景色是可行的，但别指望它能继承父元素的 color 或响应 prefers-color-scheme —— 浏览器对它的样式支持非常有限，只认 color、background-color、text-shadow、cursor 和少数几个文本相关属性。其他像 font-weight、border、transform 全部被忽略。
常见错误现象：
写了一堆样式发现没生效，其实是浏览器压根不解析；或者在深色模式下背景色和文字色撞成一片，根本看不清选中内容。
- 必须显式声明
color，不能依赖继承 -
background-color推荐用半透明白色/黑色（如rgba(0,0,0,0.3)），避免硬编码纯色导致暗色模式下不可读 - Firefox 仅支持
::-moz-selection，且不支持text-shadow
需要兼容Firefox就得写两套选择器
chrome/Safari/edge 用 ::selection，Firefox 必须额外加 ::-moz-selection，而且两者不能合并书写 —— 否则整个规则会被 Firefox 当作无效而丢弃。
使用场景：你希望深色页面里选中文本有浅灰底+深灰字，又不想让用户在 Firefox 里看到默认蓝底白字。
立即学习“前端免费学习笔记（深入）”；
::selection { background-color: rgba(255, 255, 255, 0.3); color: #1a1a1a; } ::-moz-selection { background-color: rgba(255, 255, 255, 0.3); color: #1a1a1a; }- 两个选择器必须分开写，中间不能有逗号或空格连接
- Firefox 不支持
text-shadow，加了也白加 - 如果只写
::selection，Firefox 下完全回退到系统默认样式
全局设置 vs 局部覆盖要分清作用域
::selection 是全局生效的，但可以被更具体的选择器覆盖。比如给某个 <article></article> 单独设选中样式，就得用 article::selection，否则它会沿用 body 级的定义。
容易踩的坑：在组件库或框架里改了全局 ::selection，结果发现模态框里的文本选中色和按钮文字色冲突，或者代码块里语法高亮被覆盖掉。
- 优先用元素限定范围，比如
pre::selection专用于代码块 - 避免在
body或*上直接写::selection，除非真要全站统一 - 如果用了 CSS-in-js 或 Shadow dom，
::selection默认不会穿透，得在对应 scope 内重写
移动端 Safari 的 selection 行为很特别
iOS Safari 对 ::selection 的支持不完整：它允许改 background-color，但会强制把 color 覆盖为系统高亮色（通常是白色），哪怕你写了 color: red 也没用。而且长按唤出的选词菜单（“复制”“搜索”等）背景色不受控制。
性能影响几乎为零，但它确实是个“看起来改了、其实没生效”的典型场景。
- 不要在 iOS 上依赖
color做可读性保障，只靠background-color对比度 - 测试时务必真机长按，模拟器有时表现不一致
- 如果产品强依赖选中文本的视觉一致性（比如教育类划词笔记），得考虑用 JS 模拟选区 + 自定义高亮层
实际项目里最常漏掉的是 Firefox 双写和 iOS 的 color 失效——这两个点不验证，上线后用户反馈“选中看不见字”，就只能紧急补 ::-moz-selection 和调透明度。