::selection 必须与::-webkit-selection同时声明且顺序正确、内容一致，否则Safari/Chrome不生效；仅支持color、background-color等少数属性，且需成对设置避免文字消失；不继承、不跨元素，移动端支持不稳定。
::selection 必须同时写 ::-webkit-selection 和 ::selection，且顺序不能错、内容必须完全一致，否则 Safari/Chrome 里大概率不生效。
为什么写了 ::selection 却完全没反应
不是语法错了，而是浏览器压根没执行这条规则：
- 父容器或自身设了
user-select: none→ 文本根本不可选，伪元素无从触发 - 写在
@media内部、.class或#id选择器里 → Safari 和旧版 Chrome 直接忽略，必须是顶层独立声明 - 用了 CSS-in-JS（如 Emotion、styled-components）→ 样式被注入局部作用域，
::selection不穿透；得用injectGlobal或手动插入<style></style>到 - UI 框架（如 Ant Design）全局重置了
::selection，颜色设为transparent或继承值 → 需显式覆盖，且权重要够高
::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 { ... } - 只对段落生效：
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 层兜底。
