::selection不生效的根本原因是选择范围受限于容器且仅作用于根级或其直接子元素，常见于css优先级覆盖、使用不支持属性、错误嵌套写法（如div::selection无效）及浏览器兼容性问题。
为什么::selection有时完全不生效
根本原因通常是选择范围被限制在某个容器内，而::selection只作用于文档根级或其直接子元素的选中文本；更常见的是CSS优先级被更高权重的选择器覆盖（比如框架自带样式），或者用了不支持的属性（如background-image、text-shadow在部分浏览器中会被忽略）。
实操建议：
- 把
::selection规则写在全局样式表最底部，避免被其他规则覆盖 - 确保没用
!important强行锁死父元素的color或background-color，否则会压制::selection效果 - 不要嵌套写，
div::selection这种写法无效——它只接受顶层伪元素写法：::selection或::-moz-selection - Chrome/Edge 从 v120+ 开始支持
::selection作用于contenteditable区域，但老版本仍不支持
::selection能设哪些样式
可用属性非常有限：仅color、background-color、cursor、outline、text-shadow（部分浏览器）、caret-color（仅影响光标，非选中态）。其他如font-size、border、transform一律无效。
实操建议：
- 跨浏览器兼容写法必须同时声明
::selection和::-moz-selection，因为Firefox仍需前缀 -
background-color推荐用半透明色（如rgba(0, 120, 255, 0.3)），避免遮盖文字细节 - 慎用深色背景+深色文字组合，iOS Safari 对低对比度选中态渲染异常，可能变成纯黑块
如何让input或textarea也响应::selection
默认情况下，::selection对表单控件无效——这是浏览器的固有行为，不是CSS写错了。只有用户实际选中文字时才触发，且各浏览器实现差异大。
实操建议：
- Chrome/Edge 可通过
input::selection和textarea::selection生效（v115+），但Safari和旧版Firefox完全无视 - 如果必须统一控制，得用JS监听
select事件 + 动态插入span包裹选中内容，再配span::selection，代价是破坏原生交互逻辑 - 更稳妥的做法是放弃样式定制，接受系统默认选中色——尤其面向移动端用户时
深色模式下::selection颜色怎么适配
CSS媒体查询本身无法监听“选中态”的主题变化，@media (prefers-color-scheme: dark)对::selection无效。也就是说，你写的::selection { background: #333; }在深色模式下不会自动切换。
实操建议：
- 手动定义两套规则，用
:root[data-theme="dark"] ::selection配合JS切换data-theme属性 - 或者直接用相对色值：
background-color: color-mix(in srgb, currentColor 20%, transparent)（需检查CanIUse兼容性） - 别依赖
color-scheme: dark来联动，它只影响表单控件默认样式，不影响::selection
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
