::selection仅支持color、background-color、cursor和text-shadow（Safari 15.4+）等文本相关属性，font-size、border等无效；需用双冒号、置CSS末尾、避免嵌套过深，并注意iOS系统级选择菜单会忽略该样式。
如何用 ::selection 设置选中文本样式
直接改就行，但只支持有限的 CSS 属性，且默认作用于整个文档。关键不是“能不能”，而是“哪些能、哪些不能、为什么失效”。
最常用写法是：
::selection {
background-color: #ff6b6b;
color: white;
}
注意：::selection 是伪元素，必须用双冒号；单冒号 :selection 是旧语法，仅 IE9–10 支持，现代项目建议统一用双冒号。
::selection 支持哪些 CSS 属性
它只接受文本相关属性，其他一律忽略——这不是 bug，是规范限制。
立即学习“前端免费学习笔记（深入）”；
-
color、background-color、cursor：完全可用 -
text-shadow：可用（Chrome/Firefox 支持，Safari 15.4+ 才支持） -
font-size、border、padding、transform：全部无效，设了也白设 -
background-image：不支持渐变或图片，只认纯色
为什么局部设置没生效
常见原因是选择器优先级或作用域被覆盖。比如你在某个 .article 里写：
.article ::selection { background: blue; }
看起来没问题，但实际可能被全局的 ::selection 覆盖，因为伪元素本身没有特异性权重，全靠外层选择器撑。
更稳妥的做法是：
- 把
::selection放在 CSS 文件最底部，避免被后续规则覆盖 - 用更强的选择器，比如
body ::selection或html ::selection - 避免嵌套过深，Sass/Less 编译后容易生成冗余前缀，反而降低优先级
- 检查是否在 iframe 或 Shadow DOM 内——
::selection默认不穿透这些边界
兼容性和移动端注意事项
桌面端 Chrome/Firefox/Safari 基本都支持，但移动端差异大：
- iOS Safari 直到 15.4 才支持
text-shadow和部分颜色值（如hsl()） - Android WebView（尤其旧版）可能完全忽略
::selection，或只响应background-color - 微信内置浏览器（X5 内核）对
::selection支持极差，基本只能靠 JS 模拟选中高亮 - 如果要保底效果，可加一层
::-webkit-selection（仅 WebKit），但没必要单独写——现代写法已自动兼容
真正难处理的不是语法，是当用户长按触发系统级文本选择菜单时，iOS 会强制使用浅灰背景，此时 ::selection 完全不生效——这是系统行为，CSS 无权干预。
