::selection 样式不生效最常见原因是浏览器兼容性或选择器作用域错误，仅支持有限属性且不继承父级样式，需分别声明 ::-moz-selection 和 ::-webkit-selection，并确保元素可文本选中。
为什么 ::selection 样式不生效
最常见原因是浏览器兼容性或选择器作用域错误。::selection 是伪元素，只支持有限的 CSS 属性（color、background-color、text-shadow、cursor、outline），其他如 font-size、padding、border 会被忽略。另外，它不继承父级样式，且不能嵌套在其他规则内（比如 .box ::selection 在某些旧版 Chrome 中会失效）。
- 确保没有拼写错误：
::selection是双冒号，:selection（单冒号）仅在旧版 WebKit 中部分支持，已废弃 - 检查是否被更具体的选择器覆盖——
::selection的优先级较低，可加!important测试（仅用于排查） - 若在 Shadow DOM 或 iframe 内，需在对应上下文中单独定义
- Firefox 要求同时声明
::-moz-selection（尽管现代版本已逐步统一，但 115 之前仍需）
::selection 必须搭配的浏览器前缀
目前主流浏览器已原生支持 ::selection，但为兼容 Firefox 旧版本（≤114）和 Safari 16.4 之前，仍建议保留 ::-moz-selection 和 ::-webkit-selection。注意：它们不是“前缀”，而是独立伪元素，必须分别书写，且不能合并简写。
/* 正确写法 */
::selection {
background-color: #007acc;
color: white;
}
::-moz-selection {
background-color: #007acc;
color: white;
}
::-webkit-selection {
background-color: #007acc;
color: white;
}
-
::-webkit-selection在 Safari / Chrome 中实际等价于::selection，但显式声明更稳妥 - Firefox 从 115 开始完全支持
::selection，但大量用户仍在用 114 及更早版本 - 不要写成
*::selection——通配符会降低匹配效率，且无必要
哪些元素上 ::selection 有效
::selection 作用于**可文本选中的元素内容**，不是所有 HTML 元素都默认支持。例如
、
、user-select: text 才能触发自定义 ::selection。
-
、、内文本需确保其容器有user-select: text - 若父元素设了
user-select: none，子元素即使设user-select: text也可能被阻止（取决于浏览器，Chrome 严格继承，Firefox 部分可覆盖） - Flex/Grid 容器内的文字选中不受布局影响，但若子项
display: contents，则可能丢失文本上下文，导致::selection失效
移动端 Safari 的特殊限制
iOS Safari（≤17.4）对 ::selection 支持极弱：它只响应长按唤起的系统选中菜单，且仅支持 background-color 和 color，text-shadow 和 cursor 均被忽略。此外，若页面启用 -webkit-user-select: none（常见于防误触），整个页面将无法触发 ::selection。
