在网页开发中，默认的文本选中样式通常是蓝色背景加白色文字，这种样式可能和页面的整体设计风格不契合，此时可以通过css的::selection伪元素来自定义文本选中后的显示效果，让页面视觉体验更统一。
::selection伪元素的基本用法
::selection是css中用于匹配用户选中文本的伪元素，它只能设置部分css属性，包括color、background-color、cursor、caret-color以及text-shadow，其他属性设置后不会生效。
基础的使用方式如下，选中全局文本时，背景色变为浅灰色，文字颜色变为深灰色：
/* 全局文本选中样式 */
::selection {
background-color: #f0f0f0;
color: #333333;
}
针对特定元素设置选中样式
如果想要只对特定元素的选中文本生效，可以在::selection前添加对应的选择器，比如只对段落元素的选中文本修改样式：
/* 只对p标签内的选中文本生效 */
p::selection {
background-color: #e6f7ff;
color: #1890ff;
}
/* 只对类名为highlight的元素内的选中文本生效 */
.highlight::selection {
background-color: #fff7e6;
color: #fa8c16;
}
兼容性与注意事项
不同浏览器对::selection的支持情况略有差异，需要注意以下几点：
- Firefox浏览器早期版本需要使用
::-moz-selection前缀才能生效，不过现在新版本已经支持标准的::selection写法。 - 如果同时设置了全局和特定元素的选中样式，特定元素的样式优先级更高，会覆盖全局样式。
- 不能在
::selection中使用background-image、font-size等不支持的属性，这些属性设置后不会产生任何效果。
完整示例
下面是一个完整的页面示例，包含全局和特定元素的选中样式设置：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义文本选中样式示例</title>
<style>
/* 全局选中样式 */
::selection {
background-color: #f6ffed;
color: #52c41a;
}
/* 标题选中样式 */
h2::selection {
background-color: #fff1f0;
color: #f5222d;
}
/* 代码块选中样式 */
pre::selection {
background-color: #e6f7ff;
color: #1890ff;
}
pre code::selection {
background-color: #e6f7ff;
color: #1890ff;
}
</style>
</head>
<body>
<h2>这是示例标题</h2>
<p>这是一段普通文本，你可以尝试选中这段文字查看效果。</p>
<pre>
<code>
// 这是一段代码示例
function test() {
console.log('hello world');
}
</code>
</pre>
</body>
</html>
将上述代码保存为html文件后在浏览器中打开，选中不同区域的文本就能看到对应的自定义选中样式效果。
cssselection伪元素文本选中样式前端样式优化修改时间：2026-07-17 06:15:20