::selection需拆分为三条独立规则：::selection、::-webkit-selection、::-moz-selection；chrome/safari仅认带前缀版本，逗号分组会导致整行失效；input/textarea中基本不可靠，@supports无法检测，仅js的css.supports可运行时判断。
不支持 ::selection 的浏览器（如 IE11、Android 4.4 WebView、旧版 Opera Mini）会静默忽略整条规则，不报错也不渲染——这意味着你**不需要“兜底”声明**，但必须避免让它拖垮其他样式。
为什么 ::selection 在 Chrome/Safari 里写了却没效果？
Chrome 和 Safari（Blink/WebKit 内核）根本不认标准写法 ::selection，只响应带前缀的 ::-webkit-selection。更关键的是：如果你把它们写在同一个规则里，比如：
.content::selection, .content::-webkit-selection { background: #3b82f6; }
整条规则会被浏览器直接跳过——不是部分失效，是整行作废。
- 必须拆成三条独立规则，且顺序固定：
::selection（放最前，为未来标准留位）→::-webkit-selection（必写，Chrome/Safari 唯一生效项）→::-moz-selection（Firefox 兼容，现代版本已支持::selection，但加了无害） - 不能用逗号分组，不能和其它选择器共存（如
.btn:hover::selection在 Safari 中无效） - Firefox 对
::-moz-selection支持早已稳定，但 Safari ≤15.6 渲染rgba()背景色可能出错，建议统一用十六进制不透明值，如#3b82f6
input/textarea 里的 ::selection 基本不可靠
原生表单控件的文本选中态由操作系统级渲染逻辑控制，CSS 层面干预能力极弱。
-
input[type="text"]::selection在所有主流浏览器中几乎完全无效；Chrome v115+ 对textarea::selection有微弱支持，但行为不稳定 - DevTools 里如果看到
input::selection规则显示为灰色禁用状态，说明浏览器压根没解析它——不是写错了，是根本不吃这套 - 不要试图用
user-select: text强行激活：只要父容器设了user-select: none，子元素再怎么声明也无效
@supports 无法检测 ::selection 是否可用
@supports 只能检测属性和值（如 @supports (background: oklch(0% 0 0))），对伪元素选择器完全无能为力。写 @supports selector(::selection) 在 Chrome 110+ 才开始实验性支持，IE11、Safari ≤15.3、Firefox ≤108 都不认识这个语法，连 fallback 都进不去。
- 别指望用 CSS 规则做降级开关——旧浏览器遇到不认识的选择器，直接丢弃整条规则，不会执行后续声明
- 真正能用的只有运行时 JS 检测：
CSS.supports('selector(::selection)')，但需先判断CSS.supports是否存在（IE11 不支持） - 检测必须在 DOM ready 后执行，否则测试元素未挂载，结果不可靠；且即使检测为 true，也不能保证
input或 Shadow DOM 内生效
最常被忽略的一点：伪元素不继承、不穿透、不响应结构变化。::selection 的作用域比你想象中窄得多——它不进 Shadow DOM，不跨 scoped style，甚至受 user-select 状态严格限制。写完别急着测“看起来有没有变色”，先打开 DevTools 选中文字，看 Styles 面板是否真匹配到规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
