什么是::selection伪元素
::selection是css中提供的伪元素，用于匹配用户通过鼠标或其他方式选中的页面文本内容，开发者可以通过这个伪元素为选中的文本设置自定义样式，比如修改选中后的背景颜色、文字颜色等，让页面的交互细节更贴合整体设计风格。
::selection的基本使用语法
使用::selection伪元素的语法非常简单，不需要在HTML中添加额外的标签，直接在css样式表中定义即可。基本语法结构如下：
/* 针对整个页面的选中文本设置样式 */
::selection {
background-color: #ffeb3b; /* 选中背景色 */
color: #333; /* 选中文字颜色 */
}
/* 针对特定元素内的选中文本设置样式 */
p::selection {
background-color: #e3f2fd;
color: #1565c0;
}
::selection可设置的样式属性
需要注意的是，::selection伪元素仅支持部分css属性，不能设置所有样式，目前主流浏览器支持的可设置属性如下：
- color：选中文本的文字颜色
- background-color：选中文本的背景颜色
- text-shadow：选中文本的文字阴影效果
- text-decoration：选中文本的下划线、删除线等装饰效果
- stroke-color、fill-color、stroke-width：这几个属性仅针对SVG文本元素的选中效果生效
像font-size、margin、padding这类会影响文本布局或元素盒模型的属性，是无法在::selection中生效的。
使用::selection的注意事项
兼容性问题
::selection伪元素的兼容性表现如下：
| 浏览器 | 支持版本 |
|---|---|
| Chrome | 1.0及以上版本支持，早期需要使用::-webkit-selection前缀 |
| Firefox | 2.0及以上版本支持，早期需要使用::-moz-selection前缀 |
| Safari | 3.1及以上版本支持 |
| Edge | 12.0及以上版本支持 |
| IE | 9.0及以上版本支持 |
目前现代浏览器已经不需要添加私有前缀，直接使用::selection即可正常生效。
继承规则限制
::selection伪元素的样式不会继承父元素的::selection设置，每个元素的选中样式要么使用全局的::selection设置，要么单独为该元素定义::selection样式，不会向上继承。
优先级规则
如果同时定义了全局的::selection样式和特定元素的::selection样式，那么特定元素的样式优先级更高，会覆盖全局设置。比如下面的代码中，段落内的选中样式会使用p::selection的定义：
/* 全局选中样式 */
::selection {
background-color: #ffccbc;
color: #bf360c;
}
/* 段落选中样式，优先级更高 */
p::selection {
background-color: #c8e6c9;
color: #2e7d32;
}
完整示例代码
下面是一个完整的页面示例，展示了不同元素的自定义选中效果：
<!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: #fff3e0;
color: #e65100;
}
/* 标题选中样式 */
h2::selection {
background-color: #e8f5e9;
color: #1b5e20;
}
/* 代码块选中样式 */
pre::selection {
background-color: #f3e5f5;
color: #4a148c;
}
/* 强调文本选中样式 */
em::selection {
background-color: #fce4ec;
color: #880e4f;
text-decoration: underline;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
pre {
background-color: #f5f5f5;
padding: 15px;
border-radius: 4px;
overflow-x: auto;
}
</style>
</head>
<body>
<div class="container">
<h2>自定义文字选中效果演示</h2>
<p>你可以尝试选中这段文字，查看默认的全局选中效果。这段文字的背景会变成浅橙色，文字会变成深橙色。</p>
<p>这是另一段普通文本，选中它也会应用全局的选中样式。</p>
<h2>特定元素选中效果</h2>
<p>选中这个标题，你会发现它的选中背景是浅绿色，文字是深绿色，和全局样式不同。</p>
<pre>
// 这是一段代码示例
function test() {
console.log('选中这段代码，背景是浅紫色，文字是深紫色');
}
</pre>
<p>选中这段<em>带强调的文本</em>，它的选中效果会有下划线，背景是浅粉色，文字是深粉色。</p>
</div>
</body>
</html>
将上述代码保存为html文件后，用浏览器打开，就可以看到不同元素的自定义文字选中效果了。
css::selection文字选中效果自定义样式修改时间：2026-06-28 09:54:30