::selection 仅控制选中样式，无法禁用选择，禁用必须用 user-select: none；失效主因是祖先元素设置了 user-select: none；需限定宿主元素且兼容 safari 需加 ::-webkit-selection。
::selection 本身不能让区域“不可选中”，它只负责样式；要禁用选择，必须配合 user-select: none。单独写 ::selection 规则对禁用行为毫无作用，反而容易让人误以为样式没生效是写法问题。
为什么 ::selection 不生效？先查 user-select 是否被父级阻断
最常见的失效场景不是 CSS 写错，而是文本根本无法被选中——user-select: none 在祖先元素上已生效，导致 ::selection 根本没机会触发。
- 检查目标文本的任意上级容器（包括
、<main></main>、<section></section>）是否设置了user-select: none或-webkit-user-select: none - Chrome 严格继承
user-select，即使子元素显式写user-select: text也可能被忽略；Firefox 部分版本允许覆盖，但不可依赖 - 临时加一句
user-select: text !important到目标元素，看能否恢复选中——能，则确认是继承干扰
::selection 必须依附宿主元素，不能裸写
单独写 ::selection { background: #007acc; } 在现代浏览器（Chrome/Edge 119+、Firefox 120+）中会被忽略，Safari 更是完全不认。
- ✅ 正确写法：用具体元素或类限定，例如
p::selection、.content::selection、article *::selection - ⚠️
*::selection虽然能覆盖广，但性能略低，且在部分旧版 Safari 中匹配不稳定 - ❌ 错误写法：
::selection单独一行，无前缀也无宿主；或写成div > ::selection（语法非法）
Safari 兼容必须显式声明 ::-webkit-selection
Safari（截至 iOS 17.5 / macOS 14.4）仍不支持标准 ::selection，仅识别带前缀版本。仅写标准版等于对 Safari 完全失效。
- 必须同时写两组，且样式值完全一致：
::-webkit-selection { background-color: #007acc; color: white; } ::selection { background-color: #007acc; color: white; } - 顺序无关，但建议把
::-webkit-selection放前面，方便调试时一眼看到兼容层 - 不要用
!important—— 多数浏览器在::selection中会忽略它，且掩盖真实优先级问题
真正需要“特定区域不可选中”时，核心动作只有一步：user-select: none。而 ::selection 的全部价值，只是在用户**能选中**的前提下，控制那一下高亮的样子。很多人花半天调 ::selection 却忘了先确认文本能不能被选——这是最常卡住的起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
