::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 元素都默认支持。例如 <div>、<p>、<span> 默认可选中；但 <button>、<input>、<textarea> 的选中行为由 UA 样式控制，需额外设置 user-select: text 才能触发自定义 ::selection。
-
<img>、<canvas>、<svg>内文本需确保其容器有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。
立即学习“前端免费学习笔记（深入）”；
- 测试时务必真机验证，模拟器常表现异常
- 避免在
<body>上全局设user-select: none；如需禁用，改用touch-action: manipulation或事件拦截 - iOS 17.5+ 开始逐步对齐标准，但仍有小概率忽略
::-webkit-selection声明
真正麻烦的不是写法，而是不同环境里「看起来写了却没反应」——尤其当它在桌面端正常、移动端消失，或只在部分文字上生效时，大概率是 user-select 链路被某层 CSS 或 JS 意外截断了。
