::selection伪元素仅支持color、background-color、cursor、outline、text-shadow等有限样式，font-size等无效；需兼容写法：::selection、::-moz-selection、::-webkit-selection；ios safari仅支持color，background-color基本无效。
selection伪元素能改哪些样式
只支持有限的几个CSS属性：color、background-color、cursor、outline、text-shadow。其他像font-size、padding、border全无效，写了也白写。
常见错误是以为能像普通元素一样自由设置——结果调半天发现背景色没变，其实是误加了background（它不生效）而不是background-color。
::selection在不同浏览器里的写法差异
Chrome/Edge/新版Firefox用::selection；老版Safari（≤15.4）和旧Firefox（≤67）必须加::-webkit-selection和::-moz-selection前缀才能生效。
实际写法得这样兜底：
立即学习“前端免费学习笔记（深入）”；
::selection {
background-color: #ff9e6d;
color: #fff;
}
::-moz-selection {
background-color: #ff9e6d;
color: #fff;
}
::-webkit-selection {
background-color: #ff9e6d;
color: #fff;
}
漏掉任一前缀，对应浏览器里选中文本就还是系统默认蓝底白字。
全局设置 vs 局部覆盖的优先级问题
::selection本身没有继承性，但它的样式会受选择范围内的元素影响。比如给<p></p>单独设了::selection，那这段文字被选中时就走这个规则；没设的话，才回落到全局规则。
容易踩的坑：
- 在
body上设了全局::selection，但某个<div class="code-block">里想用深色背景配浅色字，却忘了给<code>.code-block::selection单独定义 - 用了CSS-in-JS或Shadow DOM，
::selection可能被作用域隔离，根本不起作用 - 某些富文本编辑器（如Draft.js、Slate）自己接管了选中逻辑，原生
::selection会被绕过
移动端iOS Safari的特殊限制
iOS Safari（至少到16.x）对::selection支持极弱：只认color，background-color基本无效，哪怕加了-webkit-前缀也没用。
这不是你代码写错了，是它就是不支持。如果项目强依赖选中高亮，得考虑用JS模拟（比如监听selectionchange，动态插入<span></span>包裹选中内容），但代价是破坏原生体验和可访问性。
真正麻烦的是：这个限制不会报错，也不会警告，你只能在真机上试，模拟器都测不出来。
