CSS怎样给选中的文本修改背景色与文字颜色_利用::selection伪元素-css教程-PHP中文网

直接写::selection伪元素即可生效，但仅支持color、background-color等有限属性，不继承父级颜色，需显式声明；旧版浏览器需添加::-moz-selection和::-webkit-selection前缀，且顺序应为前者优先、标准写法兜底。

css怎样给选中的文本修改背景色与文字颜色_利用::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，得补前缀。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

推荐写法（兼顾现代与旧环境）：

::-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 设成了透明背景，得检查是否被覆盖
在或里选中文本——::selection 对表单控件无效，得单独用 ::-webkit-input-placeholder 类似思路处理（但实际不支持选中态定制）
用了 !important 在别的地方强行改了 color，而 ::selection 的优先级不够高，此时要在 ::selection 规则里也加 !important