::selection有时完全不生效，最常见原因是选择器优先级不足或被其他样式覆盖；它仅支持color、background-color、text-shadow、cursor和outline（部分浏览器），不继承父样式，且无法穿透Shadow DOM。
为什么 ::selection 有时完全不生效？
最常见原因是选择器优先级不足或被其他样式覆盖。浏览器对 ::selection 的支持有严格限制：它只接受 color、background-color、text-shadow、cursor 和 outline（部分浏览器）这五个属性，其余如 font-size、padding 全部被忽略。另外，它不继承父元素样式，必须显式声明。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
::selection规则放在 CSS 文件靠后位置，避免被更早定义的同名规则覆盖 - 不要嵌套写法（如
p::selection在某些旧版 Safari 中失效），推荐全局写法：::selection { background-color: #ff6b6b; } - 如果页面用了 CSS-in-JS 或 Shadow DOM，需确认作用域是否包含该伪元素——它无法穿透 Shadow Boundary
::selection 在不同浏览器中的兼容性差异
Chrome / Edge / Firefox 支持良好，但 Safari（尤其是 iOS 15.4 之前）对 ::selection 的 color 和 background-color 支持不稳定，且不支持在 @media 查询中使用。更关键的是：Safari 默认会强制将选中文本的 color 设为白色（即使你设了黑色），除非同时设置 background-color。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终成对设置：
::selection { background-color: #4a90e2; color: white; }，避免 Safari 下文字不可读 - 如需深色模式适配，不能依赖
@media (prefers-color-scheme: dark)包裹::selection（无效），应改用 JS 动态切换 class 并定义.dark ::selection - 测试时务必在真机 Safari 上验证，模拟器可能表现正常但实际设备不生效
如何让 ::selection 在输入框（<input>、<textarea>）中也起作用？
默认情况下，::selection 对表单控件无效。这是因为原生输入框的文本选择由操作系统渲染层控制，CSS 伪元素无法接管。但可通过 user-select: text 配合 -webkit-text-fill-color 等前缀属性“绕过”限制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对
<input type="text">和<textarea>单独加前缀规则：::-webkit-input-placeholder::selection { background-color: #ffeb3b; } input::selection, textarea::selection { background-color: #ffeb3b; } ::-moz-selection { background-color: #ffeb3b; } - 注意：Firefox 不支持
input::selection，只能靠::-moz-selection（已废弃但仍有效），而 Safari 需要::-webkit-selection（仅旧版本） - 更稳妥的做法是禁用原生选择样式，用 JS 模拟选区（代价是复杂度陡增，一般不推荐）
为什么设置了 ::selection 后，部分文字背景色出现闪烁或错位？
这是由于浏览器在重绘选区时，若父容器有 transform、opacity < 1 或 will-change，会导致合成层异常，使 ::selection 渲染偏移或闪烁。尤其在滚动容器（如 overflow-y: auto）内选中文本时高频出现。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查父级是否有
transform: translateZ(0)或opacity: 0.99类似“触发硬件加速”的 hack，临时移除它们验证是否为根因 - 避免在
position: fixed或backdrop-filter元素内部使用::selection - 如果必须保留这些样式，可对选中文本容器加
isolation: isolate强制新建层叠上下文，缓解错位
::selection 表面简单，但跨浏览器行为、表单控件支持、合成层干扰这三个点最容易被忽略。真正上线前，至少要在 Chrome、Firefox、Safari（iOS + macOS）、Edge 四个环境里分别拖选文本三次。 
