::selection 必须与::-webkit-selection成对且完全一致才生效，仅支持color、background-color等少数属性，需顶层声明、避免父级user-select:none，并注意移动端兼容性。
直接写 ::selection 基本没用，必须搭配 ::-webkit-selection 且规则完全一致，否则 Safari 和 Chrome 里根本看不到效果。
为什么写了 ::selection 却完全不生效
不是语法错，而是浏览器压根没执行这条规则：
-
user-select: none写在父容器（比如body或某个 wrapper）上 → 文本不可选，伪元素无从触发 - 写在
@media、.class或#id选择器内部 → Safari 和旧版 Chrome 直接忽略，必须是顶层独立声明 - 用了 CSS-in-JS（如 styled-components、Emotion）→ 样式注入局部作用域，
::selection不穿透；得用injectGlobal或手动插入<style></style> - UI 框架（如 Ant Design）全局重置了
::selection，设为transparent或继承值 → 需显式覆盖，且选择器权重得够高
::-webkit-selection 和 ::selection 必须成对+内容一致
只写 ::selection 在 Chromium/Safari 下大概率失效。WebKit/Blink 内核强制要求显式声明 ::-webkit-selection，且两个规则的属性名、值写法（比如都用 #3b82f6，别一个用 rgb() 一个用 hex）必须完全一致：
-
::-webkit-selection建议放前面，::selection放最后作标准兜底 -
::-moz-selection已废弃，Firefox 100+ 只认::selection，不用加 - PostCSS autoprefixer 默认不处理这两个伪元素，构建时得确认没被误删
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
::-webkit-selection {
color: white;
background-color: #3b82f6;
}
::selection {
color: white;
background-color: #3b82f6;
}
只支持 color 和 background-color，其他全被静默丢弃
::selection 不是普通选择器，浏览器只接受极少数视觉属性，其余一律静默忽略、不报错也不提示：
- ✅ 安全可用：
color、background-color（推荐用十六进制，避免rgba()或hsl()在 Safari 渲染异常）、text-shadow（Chrome/Firefox 支持好，Safari 15.4+ 才支持） - ❌ 明确无效：
font-size、padding、border、opacity、transform、background（注意：必须写background-color，写background可能失效） - ⚠️ 特别注意：
color和background-color建议成对设置，只设一个容易导致文字“消失”（比如深色背景上只设background-color，文字继承黑色就看不清）
给不同区块设不同高亮色，靠选择器层级控制
::selection 不继承、不跨元素混合，它始终作用于被选中文本所在的具体宿主元素：
- 全局统一：
::selection { background: #ff6b6b; color: white; } - 只对段落生效：
p::selection { background: #ffcc00; color: #333; } - 代码块特殊处理：
pre::selection, code::selection { background: #2d2d2d; color: #f8f8f2; } - 引用区块单独配色：
.quote blockquote::selection, .quote cite::selection { color: #666; } - 跨区块选中时，颜色由起点所在元素的最近有效规则决定，不是按区域拼接
最容易被忽略的一点：移动端（尤其是 iOS Safari）对 ::selection 的支持仍不稳定，长按选词常被系统级高亮覆盖；别把它当关键交互依赖，必要时配合 document.getSelection() 做 JS 层兜底。
