::selection 仅支持 color、background-color 等5个属性，因浏览器为保障可访问性强制限制；safari需15.4+且禁用prefers-reduced-motion/forced-colors才生效；ios/android移动端基本不可靠，推荐js模拟或交互反馈替代。
系统高亮色（如 ::selection 中的背景或文字色）不能被“直接修改”不是因为写法错，而是浏览器出于可访问性与系统一致性强制限制了作用域和取值范围——你改不了，是因为浏览器压根不让你改。
为什么 ::selection 只能设 color 和 background-color
现代浏览器（Chrome 120+、Firefox 110+、Edge 115+）对 ::selection 的支持已收敛为严格白名单：仅 color、background-color、text-shadow、cursor、outline 这 5 个属性有效。其余如 font-weight、border、opacity、filter 全部被静默丢弃，不报错也不警告。
常见误操作：
- 写了
pre::selection { background: linear-gradient(...); }→ 渐变失效，回退到纯色或默认 - 在 Vue scoped style 里只写
::selection→ 因属性选择器隔离，实际生成的选择器无法命中文本节点 - 父元素设了
user-select: none→ 整个区域禁用选中，::selection规则彻底不触发
::selection 在 Safari 上不生效的硬性条件
Safari 15.4+ 才开始支持标准 ::selection，旧版完全无视。但即使新版，也必须满足两个前提：
- 页面未启用
prefers-reduced-motion或forced-colors模式（此时系统接管高亮逻辑，CSS 失效） - 元素本身允许被选中：
user-select: text或未显式设为none；contenteditable="true"的容器内文本才真正受控
真机调试时发现无效？先检查 DevTools → Rendering → Emulate CSS media → 关掉 forced-colors 和 prefers-reduced-motion 再试。
移动端 ::selection 基本不可靠，别强求
iOS Safari 对 ::selection 的支持极弱：选中文本后系统高亮层（蓝底白字）会直接覆盖你的 CSS 设置，且无法通过 z-index 或 opacity 干预。Android Chrome 更干脆——从不读取 ::selection 规则。
替代思路：
- 需要自定义高亮反馈？改用 JS 模拟：监听
selectionchange，用document.getSelection()获取范围，包裹<mark></mark>并设样式 - 仅需视觉统一？放弃
::selection，转而用user-select: none+ 点击态反馈（如:active+scale）替代选中意图 - 代码块等固定场景？用
pre::selection+background-color: #ffeb3b覆盖，但必须接受 iOS 下仍可能被系统降级
真正能绕过限制的唯一路径：前缀 + 特异性 + 时机
想让 ::selection 尽可能生效，得同时满足三件事：
- 写全四套前缀：
::selection、::-moz-selection、::-webkit-selection、::-ms-selection（Safari 16.4 前、旧 Edge 必须靠这个） - 提高选择器特异性：全局写
::selection { ... }容易被组件库覆盖；局部用.article p::selection或blockquote::selection - 确保样式加载时机早于内容渲染：避免放在异步加载的 CSS chunk 里，或用
<style></style>内联关键规则
最常被忽略的一点：深色模式下 background-color 若没适配，比如设成 #fff，在暗色主题里会变成刺眼白块——必须配合 @media (prefers-color-scheme: dark) 重设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
