::selection不生效的主因是优先级覆盖、user-select:none禁用选择、input/textarea需专用伪元素、Firefox要求全局作用域、CSS-in-JS/Shadow DOM作用域限制及浏览器前缀差异；跨浏览器需同时声明::selection和::-moz-selection，禁用!important与rgba半透明色，动态换色须JS注入style标签。
Chrome/Firefox里::selection不生效的常见原因
直接在:root或body写::selection { background: #ff6b6b; }却没反应？大概率是浏览器默认样式被更高优先级规则覆盖，或者伪元素没作用到目标文本节点上。
- 必须确保目标元素没有设置
user-select: none，否则根本无法触发选中 -
::selection只作用于可选中文本内容，对input、textarea无效（它们要用::-webkit-textfield-decoration-container等私有前缀） - Firefox要求
::selection必须写在全局作用域（不能嵌套在@media或@supports里），否则静默失效 - 如果用了CSS-in-JS或Shadow DOM，需确认样式作用域是否穿透到了文本宿主元素
跨浏览器统一::selection颜色的最小兼容写法
别指望单靠::selection一招打遍天下。WebKit内核（Chrome/Safari）和Gecko（Firefox）对伪元素支持不一致，得用前缀兜底。
/* 顶层CSS，不嵌套 */
::selection {
background-color: #4a6fa5;
color: white;
}
::-moz-selection {
background-color: #4a6fa5;
color: white;
}-
::-moz-selection必须单独写，不能合并进::selection声明块 - 不要给
::selection加!important——它本身已有足够高权重，加了反而可能被某些框架重置逻辑干扰 - 避免使用半透明色（如
rgba(74, 111, 165, 0.8)），Firefox旧版本会直接忽略
Vue/React项目中动态切换::selection颜色的限制
想根据主题色实时更新选中色？CSS变量在这里帮不上忙——::selection不支持var(--primary)，所有浏览器都无视。
- 只能通过JS动态注入
<style>标签，生成新的::selection规则 - 注意避免重复插入导致样式表膨胀，每次切换前先移除旧的
<style id="selection-theme"> - 服务端渲染（SSR）场景下，初始HTML里必须包含默认主题的
::selection规则，否则首屏无样式 - 不要尝试用
document.styleSheets去修改CSSRule——大多数浏览器禁止JS操作伪元素规则
移动端Safari对::selection的特殊处理
iOS Safari不仅支持::selection，还悄悄加了个::-webkit-touch-callout，但真正影响体验的是它的“双击选中”行为。
立即学习“前端免费学习笔记（深入）”；
- 长按选中文本后，系统自带放大镜可能遮挡自定义
::selection背景，这不是CSS问题，而是iOS交互层覆盖 - 如果页面有
-webkit-user-select: text，记得同时配user-select: text，否则Android WebView可能失效 - 慎用深色背景+浅色文字组合下的高亮色——iOS会自动降低对比度以满足可访问性，实际显示可能比预期更淡
真正在意品牌色一致性的话，别只盯着::selection；用户真正注意到的，往往是选中后紧接着出现的复制/搜索浮层颜色，那部分得靠原生能力或JS模拟控制。
