::selection无效最常见原因是未顶层声明且未双写前缀：必须独立写在CSS顶层，先::-webkit-selection再::selection，不可嵌套；父元素user-select:none、CSS-in-JS作用域限制、UI框架重置及移动端兼容性问题亦会导致失效。
为什么写了::selection却完全没反应
最常见原因不是语法错，而是规则压根没被浏览器解析到：::selection不能嵌套在任何类、ID 或媒体查询里——比如.article p::selection或@media (min-width: 768px) { ::selection { } }在 Safari 和旧版 Chrome 中会被直接跳过。
父容器设了user-select: none，子元素根本无法触发选中行为；CSS-in-JS 库（如 Emotion）默认注入局部作用域，::selection得用 injectGlobal 或手动插入 <style> 到 <head>；某些 UI 框架（如 Ant Design）重置了全局 ::selection，颜色设为 transparent 或继承，需显式覆盖。
::selection必须双写前缀且顶层声明
仅写 ::selection 在 iOS Safari 15.4 之前、Android WebView 等环境会失效。正确顺序是先 ::-webkit-selection，再 ::selection：
::-webkit-selection {
color: #fff;
background-color: #007acc;
}
::selection {
color: #fff;
background-color: #007acc;
}::-moz-selection 已废弃，Firefox 91+ 只认标准 ::selection，加了反而冗余；::selection 必须是顶层 CSS 规则，不能包裹在任何其他选择器或条件块内；别把 ::selection 放在 ::-webkit-selection 前面，否则部分 Safari 会忽略后者。
不同区块用不同高亮色，得靠具体宿主元素选择器
::selection 不继承，也不作用于“容器”，而是作用于被选中文本所在的**实际宿主元素**（比如 p、span、h1）。所以写成 .sidebar::selection 没效果，是因为文本实际在 .sidebar p 里。
立即学习“前端免费学习笔记（深入）”；
- 要给文章段落设黄色高亮：
.article p::selection { background: #ffcc00; color: #333; } - 要覆盖引文区域：
.quote blockquote::selection, .quote cite::selection { color: #666; } - 跨区块拖选时，颜色由**选区起点所在元素的最近有效规则**决定，不会渐变或拼接
只支持有限属性，别乱试
::selection 不是普通选择器，浏览器只接受特定视觉属性，其余一律静默忽略：
- ✅ 安全可用：
color、background-color（支持rgba()，但transparent会退回到系统默认色）、text-shadow（Chrome/Safari 支持较好，Firefox 目前不支持） - ❌ 明确不支持：
font-size、padding、border、opacity、transform、CSS 变量计算（如calc(--accent * 0.8)） - 别写
color: inherit或color: currentcolor——它不继承，必须写具体值 - 移动端 Safari 对
text-shadow和color支持极弱，background-color是唯一稳定可控的属性
深色模式下固定色值极易对比度不足，甚至文字消失；iOS Safari 长按呼出菜单时，::selection 样式可能完全不触发——这是系统级限制，JS 无法绕过。
