::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 有效
iOS Safari（≤17.4）对 立即学习“前端免费学习笔记（深入）”； 真正麻烦的不是写法，而是不同环境里「看起来写了却没反应」——尤其当它在桌面端正常、移动端消失，或只在部分文字上生效时，大概率是 ::selection 作用于**可文本选中的元素内容**，不是所有 HTML 元素都默认支持。例如 、 默认可选中；但 、、 的选中行为由 UA 样式控制，需额外设置 user-select: text 才能触发自定义 ::selection。
、 内文本需确保其容器有 user-select: text
user-select: none，子元素即使设 user-select: text 也可能被阻止（取决于浏览器，Chrome 严格继承，Firefox 部分可覆盖）display: contents，则可能丢失文本上下文，导致 ::selection 失效移动端 Safari 的特殊限制
::selection 支持极弱：它只响应长按唤起的系统选中菜单，且仅支持 background-color 和 color，text-shadow 和 cursor 均被忽略。此外，若页面启用 -webkit-user-select: none（常见于防误触），整个页面将无法触发 ::selection。
上全局设 user-select: none；如需禁用，改用 touch-action: manipulation 或事件拦截::-webkit-selection 声明user-select 链路被某层 CSS 或 JS 意外截断了。
