chrome/safari中::selection必须独立声明::-webkit-selection才生效，标准::selection会被忽略；需拆分为三条独立规则，禁用分组写法，且仅支持color、background-color等极少数属性。
Chrome/Safari 里 ::selection 必须写 ::-webkit-selection 才生效
标准写法 ::selection 在 Chrome、Edge（Chromium 内核）和 Safari 中会被直接忽略——不是 bug，是当前 WebKit/Blink 实现的硬性要求。浏览器只认带前缀的版本，且不支持“降级 fallback”：哪怕你同时写了 ::selection 和 ::-webkit-selection，只要它们在同一条规则里（比如用逗号分组），整条规则都会被丢弃。
正确做法是拆成三条独立规则：
-
::selection放最前（为未来标准兼容留位置） -
::-webkit-selection必须有，且不能和别的选择器共存 -
::-moz-selection仅 Firefox 需要，现代版本已支持::selection，但加了不伤性能
Firefox 不吃 text-shadow 或 background-image 这类属性
::selection 只接受极窄的属性白名单，多一个就静默失效，不报错也不提示。Firefox 虽然支持 text-shadow，但 Chrome/Safari 完全无视；background-image、border、font-size、opacity、calc() 计算值，在所有浏览器里都无效。
特别注意：rgba() 半透明背景色在 Safari ≤ 15.6 中可能退化为纯黑或纯白，iOS Safari 甚至会把颜色渲染反（文字色当背景色）。稳妥方案是用十六进制不透明值，比如 #3b82f6，而不是 rgba(59, 130, 246, 0.3)。
input/textarea 里 ::selection 基本是摆设
这不是你代码写错了，而是浏览器有意限制：原生表单控件的文本选中态由操作系统级渲染逻辑控制，CSS 层面无法可靠干预。Chrome v115+ 对 textarea::selection 有微弱支持，input[type="text"]::selection 依然几乎无效；Safari 则基本无视所有表单控件内的 ::selection 规则。
如果你发现 input::selection 在 DevTools 里显示为灰色禁用状态，说明浏览器压根没加载这条规则——它连解析都没过。
作用域和触发条件比想象中更苛刻
::selection 不继承父级样式，也不穿透 Shadow DOM 或 scoped CSS（比如 Vue 的 <style scoped></style>）。更隐蔽的是：只要父容器设置了 user-select: none，子元素哪怕显式声明 user-select: text，::selection 也不会触发——因为用户根本选不了那段文字。
排查时直接打开 DevTools，选中一段文字，在 Styles 面板搜 ::selection，看有没有匹配规则；再往上点 computed 标签页，检查 user-select 是否为 none 或 auto（auto 在某些上下文中等效于 none）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
