::selection中background-color必须用rgba()或hsla()设置透明度，因其不支持opacity且仅有限属性生效；transparent易致选中文本不可见，需按背景色深浅选用0.25–0.5的alpha值，并注意input/textarea不生效。
直接用 ::selection 配 background-color 的 rgba() 或 hsla() 值就能实现选中背景带透明度，不需要额外 hack；但浏览器兼容性和作用范围有硬限制，不注意会白配。
为什么 ::selection 里 background-color 用 rgba/hsla 才有效
::selection 只支持有限的 CSS 属性，background-color 是其中之一，而 opacity 完全不被支持——加了也无效。所以必须靠颜色函数本身带 alpha 通道来表达透明度。
-
rgba(0, 0, 0, 0.3)是半透黑，文字仍清晰可读 -
hsla(210, 100%, 60%, 0.4)更适合主题色连贯性控制，比如蓝调深色模式下保持色相统一 - 别用
transparent：它等价于rgba(0,0,0,0)，实际表现是“无背景”，容易和页面底色混淆，尤其在深色背景上选中文本几乎看不见
::selection 的选择器作用域和继承陷阱
它不是全局生效的，规则匹配逻辑和普通选择器一致，但不能嵌套、不能用属性选择器，且不继承父级样式。
- 写成
p::selection只影响<p>内的选中文本，<div>或<span>里一样选中也不会变 -
.highlight::selection有效，但前提是该 class 确实挂在文本容器（如<p class="highlight">）上，挂错层级（比如只挂子元素）就失效 - 不要指望
body::selection覆盖全部——它只对 body 直接子文本生效，深层嵌套内容需单独声明或用通配（见下条）
如何稳妥覆盖所有可选中文本
最简方式是用通配组合，但要注意优先级和浏览器差异：
立即学习“前端免费学习笔记（深入）”；
- 基础写法：
::selection { background-color: rgba(42, 130, 218, 0.7); color: #fff; } - 为兼容旧版 WebKit（Safari ≤ 15.4、老版 Chrome），补一行：
::-webkit-selection { background-color: rgba(42, 130, 218, 0.7); } - Firefox 和现代 Chromium 已统一支持标准
::selection，无需前缀，但加了也不报错 - 避免用
*::selection：虽然语法合法，但部分浏览器（如某些 Android WebView）会忽略，反而不如不写
透明度值设多少才不刺眼又不糊
0.2–0.4 太淡，用户可能察觉不到选中状态；0.7–0.9 又接近不透明，失去“融合感”。真实项目里最稳的是：
- 浅色背景页：用
rgba(0, 0, 0, 0.5)或hsla(0, 0%, 0%, 0.5)，确保文字反差足 - 深色背景页：改用
rgba(255, 255, 255, 0.25)，避免高亮块像贴了层白膜 - 切记测试真实场景：复制一段含链接、
<strong>、emoji 的段落，看选中后是否出现文字断层或颜色跳变
真正容易被忽略的是：::selection 对 <input>、<textarea> 里的文本无效，它们走的是系统原生选中样式，CSS 无法接管——需要时得换思路，比如禁用原生输入框，用 div + contenteditable 模拟。
