::selection样式不生效通常因选择器范围不当、优先级不足、浏览器兼容性差或user-select被禁用。应显式指定元素如p::selection，加!important验证，补充-webkit前缀，并确保user-select:text。
在使用 ::selection 伪元素设置背景色和文字颜色时，如果样式不生效，通常不是语法错误，而是受浏览器默认行为、CSS 优先级或兼容性限制影响。下面从几个关键点帮你排查和解决。
确保选择器写法正确且覆盖到位
::selection 是一个伪元素，必须配合具体元素使用（如 p::selection），单独写 ::selection 在部分浏览器中可能无效或被忽略。建议显式指定作用范围：
- 用
*::selection全局设置（兼容性较好，但注意可能被更具体规则覆盖） - 或针对常用文本容器：
p::selection, li::selection, span::selection, div::selection - 避免只写
::selection（无前缀元素名），某些浏览器（尤其是旧版 Safari/Edge）会忽略
检查 color 和 background-color 是否被更高优先级规则覆盖
即使写了 ::selection { background-color: #ff6b6b; color: white; }，也可能因以下原因失效：
- 父元素设置了
color或background，且子元素未继承（::selection的 color 默认继承自原文本，但 background 不继承） - 其他 CSS 规则带
!important，或选择器权重更高（例如.content p::selection比p::selection权重高） - 尝试加
!important快速验证：color: white !important; background-color: #333 !important;
注意浏览器兼容性和前缀要求
::selection 在不同浏览器中支持程度不同，尤其需要处理旧版 WebKit 内核：
立即学习“前端免费学习笔记（深入）”；
- Chrome/Safari/Edge（新版）支持标准
::selection - 旧版 Safari 和 Chrome 需要
::-webkit-selection - Firefox 支持
::selection，但不支持::-moz-selection（已废弃） - 推荐写法（兼顾兼容）：
background-color: #4a90e2;
color: white;
}
*::-webkit-selection {
background-color: #4a90e2;
color: white;
}
确认文本内容可被选中
如果目标元素设置了 user-select: none 或 -webkit-user-select: none，那么 ::selection 根本不会触发——因为用户根本无法选中它。
- 检查是否意外禁用了文本选择，特别是按钮、卡片、自定义组件等
- 必要时重置：
user-select: text;或-webkit-user-select: text; - 注意：某些框架（如 Tailwind）的
select-none类会全局禁用，需针对性取消
