必须同时声明::-webkit-selection和::selection且内容完全一致，safari等浏览器才生效；仅写::selection在chrome/safari中常被忽略，且仅color、background-color等少数属性可靠支持。
直接用 ::selection 就能改，但只写它大概率在 Chrome 或 Safari 里没反应——因为浏览器对这个伪元素的兼容要求比普通 CSS 严格得多，不是语法对了就行。
必须同时声明 ::selection 和 ::-webkit-selection
Chrome、Edge（Chromium 内核）和较老版本 Safari 不认标准 ::selection，必须显式加 ::-webkit-selection 规则，且两者内容要完全一致。Firefox 现代版已废弃 ::-moz-selection，不用再写。
- 错误写法：
::selection { background-color: #ff6b6b; }—— Safari 15.3 及更早、部分 Android WebView 直接忽略 - 正确写法（顺序不重要，但建议把
::-webkit-selection放前面）：::-webkit-selection { background-color: #ff6b6b; color: white; } ::selection { background-color: #ff6b6b; color: white; } - PostCSS autoprefixer 默认不处理
::selection，如果用了构建工具，得确认它没把::-webkit-selection给删掉
::selection 只支持极少数 CSS 属性
它不是普通选择器，不能套用常规样式思维。设了 font-size、border、background-image 或 opacity 都会被浏览器静默丢弃。
- 唯一可靠生效的属性是：
color、background-color、text-shadow（Chrome/Firefox 支持，Safari 15.4+ 才支持）、cursor -
background不等于background-color：写background: #ff6b6b有时会失效，必须用全称background-color - 避免用
hsl()或带 alpha 的rgba()：Safari 渲染不稳定，深色背景上可能变灰或透明；优先用十六进制值，比如#ff6b6b
为什么局部设置总被全局覆盖？
::selection 本身没有特异性权重，它的“作用域”完全取决于外层选择器。你在 .article p::selection 里写，其实等价于给整个文档的 p 元素设选中样式——而且很容易被后面更宽泛的 ::selection 规则压住。
- 不要嵌套：
.code-block::selection是无效语法，浏览器不识别 - 想视觉上“局部化”，只能靠继承重置：比如给代码块区域设
color: #222; background-color: #f8f8f8;，再让它的::selection基于此渲染，而不是强行限定范围 - 检查
user-select：父容器若设了user-select: none，里面的内容根本无法被选中，::selection自然不会触发 - React/Vue 中动态插入的 HTML（如
dangerouslySetInnerHTML），需确认样式没被 scoped CSS 或 CSS-in-JS 隔离
input 和 textarea 的选中色根本改不了
::selection 对表单控件完全无效。所有 <input type="text">、<textarea></textarea> 的选中背景色由操作系统主题控制，CSS 无权干预。
- 移动端 iOS Safari 在长按唤起系统选择菜单时，也会绕过
::selection，强制使用浅灰背景——这是系统行为，JS 也拦不住 - 微信 X5 内核对
::selection支持极差，基本只能放弃，或用 JS 模拟高亮（代价高，仅限强需求场景） - 如果页面有代码块、引用段等需要突出显示的区域，建议统一用
pre或code标签包裹，再单独配pre::selection，比试图控制全文更可控
真正卡住人的从来不是怎么写，而是 Safari 的前缀漏没漏、input 里为啥死活不变色、以及用户在 iPhone 上长按时看到的系统菜单——那部分你根本控制不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
