::selection仅支持color、background-color、text-shadow等有限属性，需全局声明且Firefox旧版需加::-moz-selection前缀；不适用于input/textarea及部分替换元素，失效主因是user-select:none、样式覆盖或CSS-in-JS作用域隔离。
如何用 ::selection 改变选中文本颜色
直接生效，但只支持有限的 CSS 属性：color、background-color、text-shadow（部分浏览器）、cursor。其他如 font-size、border 会被忽略。
写法很简单：
::selection {
color: white;
background-color: #007acc;
}
- 必须写在全局样式中（不能嵌套在类或 ID 选择器里），否则无效
- Chrome / Edge / Safari 都支持，Firefox 需要加
::-moz-selection前缀才能兼容旧版本（新版已支持标准写法） - 如果页面有深色背景，记得同步检查选中时的可读性——比如黑底白字被选中后变成黑底黑字，就看不见了
::selection 在不同元素里表现不一致？
是的。默认情况下，::selection 是全局生效的，但你可以给特定元素单独定义：
p::selection {
color: #222;
background-color: #ffeb3b;
}
code::selection {
color: #fff;
background-color: #333;
}
- 优先级遵循 CSS 一般规则：更具体的选择器胜出（比如
.article p::selection>p::selection） - 注意
input和textarea不响应::selection—— 它们用的是系统级文本选择样式，只能通过caret-color控制光标，无法改选中背景 - 表格单元格（
td）、按钮（button）等替换元素，部分浏览器会降级使用系统样式，导致自定义失效
为什么有时候 ::selection 完全不生效？
常见原因不是语法错，而是被覆盖或限制：
立即学习“前端免费学习笔记（深入）”；
- 父元素设置了
user-select: none—— 这会让文本根本无法被选中，自然触发不了::selection - CSS 里用了
!important强制覆盖了color或background-color，而::selection的声明没加!important，就会被压住 - 用了 CSS-in-JS 库（如 Emotion、styled-components），动态生成的类名可能作用域隔离，导致
::selection规则没挂到 document 根层，需要显式用injectGlobal或全局 style 标签处理 - 某些 UI 框架（如 Ant Design）自带重置样式，会把
::selection设为透明或继承，得手动再覆盖一遍
移动端和暗色模式下的兼容细节
iOS Safari 对 ::selection 支持较弱：仅支持 color 和 background-color，且不支持伪元素嵌套（比如 div::selection span 无效）。暗色模式下没有自动适配机制，得靠媒体查询手动切：
@media (prefers-color-scheme: dark) {
::selection {
color: #111;
background-color: #e0e0e0;
}
}
- iOS 上长按唤出菜单后，选中高亮可能延迟半秒才应用新样式，属于渲染机制限制，没法绕过
- Android Chrome 一般没问题，但 WebView（尤其老版本）可能完全忽略
::selection，建议做降级提示或避免依赖它传达关键信息 - 不要指望用
::selection实现“选中即复制”之类交互——它只是视觉层，和 Selection API 无关
user-select 和作用域，再看是不是框架/构建工具把样式隔离了。 
