css文字选中颜色怎么修改_使用::selection设置选区颜色

可直接用::selection伪元素修改选中文本颜色和背景色，支持color、background-color等有限属性，需加-moz-和-webkit-前缀以兼容旧版浏览器，可通过类名限定作用范围。

可以直接用 ::selection 伪元素修改网页中被用户选中的文字颜色和背景色。

基础写法：设置选中文字的前景与背景

最常用的是同时定义 color（文字颜色）和 background-color（高亮背景色），例如：

::selection {   color: white;   background-color: #3a7ebf; }

这样，无论在哪段文字上拖选，都会显示白字蓝底效果。注意：该样式默认作用于整个页面所有可选中文本（包括 p、span、div 内的文本等）。

兼容性处理：加浏览器前缀更稳妥

虽然现代浏览器基本支持无前缀的 ::selection，但为了兼容旧版 safari 和 chrome，建议补上前缀：

立即学习“前端免费学习笔记（深入）”；

::selection {   color: white;   background-color: #3a7ebf; }  ::-moz-selection {   color: white;   background-color: #3a7ebf; }  ::-webkit-selection {   color: white;   background-color: #3a7ebf; }

其中 ::-moz-selection 针对 firefox，::-webkit-selection 覆盖 Safari 和旧版 Chrome。顺序无关紧要，但建议把标准写法放在最前面。

限制作用范围：只对特定区域生效

如果只想让某部分内容有自定义选中样式（比如仅正文区域），可以加上类名或标签限定：

• .article ::selection { color: #222; background: #ffeb3b; }
• p.highlight ::selection { color: #fff; background: #e74c3c; }

注意空格不能省略——.article::selection 表示“class 为 article 的元素自身被选中”，而 .article ::selection 才表示“article 内部任意被选中的文本”。

支持的 css 属性有限

::selection 只允许使用少数几个属性，包括：

• color
• background-color
• text-shadow（部分浏览器支持）
• cursor（极少数场景下可用）

像 font-size、border、padding 这类属性无效，设了也不会生效。