直接写::selection伪元素即可生效，但仅支持color、background-color等有限属性，不继承父级颜色，需显式声明；旧版浏览器需添加::-moz-selection和::-webkit-selection前缀，且顺序应为前者优先、标准写法兜底。
怎样用 ::selection 设置选中文本样式
直接写 ::selection 伪元素就能生效，但必须注意它只支持有限的 CSS 属性，且默认作用于整个文档。最常被忽略的一点是：它不继承父元素的 color 或 background-color，必须显式声明。
基础写法如下：
::selection {
color: #fff;
background-color: #007bff;
}
这段代码会让用户任意选中的文字变成白字蓝底。注意不要加类名或标签前缀（比如 p::selection），因为多数浏览器（Chrome、Edge、Safari）只认全局 ::selection，加了反而可能失效。
::selection 支持哪些 CSS 属性
它只接受极少几个属性，多了会静默忽略，常见错误就是写 font-weight 或 text-shadow 结果没反应。
立即学习“前端免费学习笔记（深入）”；
-
color（文字颜色）——必须显式设置，否则按浏览器默认（通常是黑字） -
background-color（背景色）——唯一可用的背景相关属性，background-image等全部无效 -
cursor（仅部分浏览器支持，不推荐依赖） -
text-shadow（Firefox 支持，Chrome/Safari 忽略）
别试 border、padding、font-size——它们不会生效，也不报错，只会让你怀疑 CSS 写错了。
跨浏览器兼容性与前缀写法
旧版 WebKit（Safari ≤ 6.1、Chrome ≤ 59）需要 ::-webkit-selection，而 Firefox 一直只认标准写法。现在可以只写标准版，但若需兼容老版本 iOS 或 Android WebView，得补前缀。
推荐写法（兼顾现代与旧环境）：
::-moz-selection {
color: #fff;
background-color: #007bff;
}
::-webkit-selection {
color: #fff;
background-color: #007bff;
}
::selection {
color: #fff;
background-color: #007bff;
}
顺序很重要：把 ::-moz-selection 放最前，避免被后面规则覆盖；::selection 放最后，作为兜底。
为什么有时改了没效果？常见陷阱
不是代码写错，而是被其他样式“压住”了。最容易踩的坑有三个：
- 页面用了 CSS 重置库（如
normalize.css），它可能把::selection设成了透明背景，得检查是否被覆盖 - 在
<input>或<textarea></textarea>里选中文本——::selection对表单控件无效，得单独用::-webkit-input-placeholder类似思路处理（但实际不支持选中态定制） - 用了
!important在别的地方强行改了color，而::selection的优先级不够高，此时要在::selection规则里也加!important
真正麻烦的是：这个伪元素无法用 DevTools 的“元素面板”实时调试，只能靠反复刷新+选中来验证。改完记得清掉浏览器缓存，尤其用 webpack dev server 时热更新可能不触发 CSS 重载。
