::selection 样式需同时设置 color 和 background-color 才生效，且须兼容 webkit 前缀；受 user-select: none、选择器优先级、shadow dom、input/textarea 限制；仅支持有限属性，深色模式需手动适配，移动端 ios 有系统级限制。
直接写 ::selection 就能改，但只声明 color 或只写 background-color 大概率没效果——必须两个都显式设置，且得兼容 WebKit 内核。
为什么 ::selection 常常不生效
最常见原因不是语法错，而是被隐性规则拦住：
-
user-select: none父容器会让子元素完全无法选中，::selection自然不会触发 - 全局写的
::selection被更具体的选择器覆盖，比如p::selection优先级高于::selection -
input和textarea默认不响应::selection（Firefox 完全不支持，Chrome/Edge 99+ 才部分支持） - Shadow DOM 或 iframe 内的内容，
::selection默认不穿透
::selection 只认这两个关键属性
它不是普通伪元素，浏览器强制限制可用样式：
- 有效且稳定：
color、background-color（必须用不透明色值，transparent会退回到系统默认） - 部分支持：
text-shadow（Chrome/Edge 可用，Firefox 忽略，Safari 15.4+ 才支持） - 完全无效：
font-size、border、padding、background-image、opacity、CSS 变量计算值
别在 ::selection 里写 font-weight 或尝试用 rgba() 控制半透效果——写了也白搭。
兼容写法必须双写，顺序不能错
现代浏览器认 ::selection，但 Safari 15.4 之前、旧版 Chrome/Android WebView 还得靠 ::-webkit-selection。Firefox 已弃用 ::-moz-selection，但为保底仍建议保留。
正确顺序（先私有，后标准）：
::-webkit-selection { color: #fff; background-color: #007acc; }
::-moz-selection { color: #fff; background-color: #007acc; }
::selection { color: #fff; background-color: #007acc; }
如果把 ::selection 放最前，WebKit 下会被后面带前缀的规则覆盖；反过来，::-moz-selection 必须放最前，否则可能被忽略。
深色模式下容易忽略的关键点
页面切暗色时，::selection 不会自动跟着变——它不响应 @media (prefers-color-scheme: dark) 的继承逻辑。
- 纯 CSS 方案：手动嵌套媒体查询，且需确认目标浏览器支持（Firefox 对其中
::selection的解析不稳定） - 更稳妥做法：用 JS 监听
prefers-color-scheme变化，动态切换document.documentElement上的自定义属性，再通过var(--selection-bg)驱动样式 - 移动端尤其 iOS：长按触发的系统级选择菜单会无视
::selection，强制用浅灰背景，这个无解
真正上线前，一定要在 iOS Safari、旧版 Android WebView 和 Firefox 里实测选中效果——最容易翻车的是 Safari 的 alpha 渲染异常和 Firefox 对表单控件的彻底不支持。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
