::selection 伪类未生效主因是缺少宿主元素、优先级不足、属性受限或 user-select 被禁用；须用 p::selection 等带元素的选择器，避免单独使用，检查特异性、浏览器兼容性及可选中性。
如果 ::selection 伪类设置的 background 和 color 没有生效，通常不是语法写错，而是被浏览器默认行为、CSS 优先级或某些限制条件干扰了。
确保选择器写法正确且覆盖范围足够
::selection 是一个伪元素，必须作用于可选中文本的元素（如 p、div、span 等），且不能单独使用——它需要依附于一个实际存在的元素选择器。
- ✅ 正确写法（推荐）：
p::selection { background: #ff6b6b; color: white; } - ❌ 错误写法：
::selection { ... }（无宿主元素，在多数浏览器中会被忽略） - ⚠️ 注意：若只写
div::selection，但文本在span内，而span又没继承或重设，则可能不生效；建议加通用规则：*::selection { background: #ff6b6b; color: white; }
检查是否被更高优先级样式覆盖
浏览器开发者工具里看 ::selection 是否被划掉（strikethrough）。常见干扰来源：
- 其他 CSS 文件或内联样式中定义了同名规则，且优先级更高（比如用了
!important或更具体的选择器） - 某些 UI 框架（如 Bootstrap、Ant Design）会重置或禁用
::selection，可搜索项目中是否有类似::selection { background: transparent; }的重置代码 -
解决方法：提高选择器特异性，或在末尾添加
!important（仅调试时用，不推荐长期依赖）
注意浏览器兼容性与限制
::selection 支持大部分现代浏览器，但存在明确限制：
立即学习“前端免费学习笔记（深入）”；
- 仅支持
color、background、background-color、text-shadow、cursor、outline、font-style、font-weight等少数属性（border、padding、margin等一律无效） - Chrome/Edge 119+ 开始支持多段选中高亮不同样式（需配合
::target-text），但基础::selection行为不变 - Safari 对
::selection支持较弱，尤其是嵌套元素内选中时表现不稳定；建议测试真实环境，必要时用-webkit-前缀兜底（虽然现在基本不需要）：p::-webkit-selection { background: #ff6b6b; color: white; }
确认文本内容可被正常选中
以下情况会导致 ::selection 完全不触发：
- 父元素设置了
user-select: none;（包括其所有后代） - 文本被包裹在
contenteditable="false"或pointer-events: none;的容器中 - CSS 中使用了
opacity: 0或visibility: hidden，虽不可见但仍占位，但选中行为异常 - 解决方法：临时给目标文本容器加
user-select: text;强制启用选中
