通过::selection伪元素可设置选中文字的样式,语法为::selection { background-color: #007bff; color: white; },需添加-webkit-和-moz-前缀以兼容旧版浏览器,可限定特定元素如p::selection或.highlight::selection,仅支持color和background-color属性。

设置元素被选中时的文字和背景颜色,可以通过 CSS 的 ::selection 伪元素来实现。这个伪元素用于定义用户用鼠标或键盘选中文本时的高亮样式。
基本语法
使用 ::selection 可以修改选中状态下的文本颜色和背景色:
::selection {
background-color: #007bff;
color: white;
}
兼容性写法
为了兼容不同浏览器(尤其是老版本 WebKit 浏览器),建议加上 -webkit- 前缀:
::selection {
background-color: #007bff;
color: white;
}
::-moz-selection {
background-color: #007bff;
color: white;
}
::-webkit-selection {
background-color: #007bff;
color: white;
}
作用于特定元素
如果只想对某个特定元素(如段落、标题)设置选中样式,可以加类名或标签限定:
立即学习“前端免费学习笔记(深入)”;
p::selection {
background-color: yellow;
color: black;
}
.highlight::selection {
background-color: red;
color: white;
}
这样只有带有 .highlight 类的元素在被选中时才会应用红色背景和白色文字。
注意事项
- ::selection 中只能使用 color 和 background-color 两个属性,其他样式无效。
- 不支持渐变、边框、阴影等复杂样式。
- 在 Firefox 中旧版本需使用 ::-moz-selection,新版已支持标准语法。
基本上就这些,简单有效。










