如何在CSS中使用伪元素::selection控制文本选中样式_结合::selection设置背景颜色

::selection伪元素用于自定义用户选中文本时的高亮样式，支持修改背景色、文字颜色等；通过设置如::selection { background-color: #ff6b6b; color: white; } 可提升页面视觉一致性，尤其适用于主题化设计，建议同时使用::-moz-selection以保证旧版浏览器兼容性。

当用户在网页上选中一段文本时，浏览器会默认使用浅蓝色作为选中区域的背景色。通过CSS中的::selection伪元素，你可以自定义这部分样式，包括修改背景颜色、文字颜色等，从而提升页面的视觉一致性和用户体验。

什么是::selection伪元素

::selection用于设置用户选中文本时的高亮样式。它只能应用于部分CSS属性，主要是颜色和背景相关的样式。

支持的常用属性包括：

• color：选中文字的前景色
• background-color：选中区域的背景色
• text-shadow：文字阴影
• cursor：光标样式（通常不生效）

注意：::selection不能改变字体大小、边距或布局类属性。

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

基本语法与背景颜色设置

使用::selection非常简单，直接像普通选择器一样定义即可：

::selection {
  background-color: #ff6b6b;
  color: white;
}

上面这段代码会将所有被选中文本的背景变为红色，文字变为白色。你也可以针对特定元素设置不同的选中样式：

凹凸工坊-AI手写模拟器

AI手写模拟器，一键生成手写文稿

500

查看详情

p::selection {
  background-color: yellow;
  color: black;
}

h1::selection {
  background-color: #4dabf7;
  color: white;
}

这样，段落（p）和标题（h1）在被选中时就会有不同的视觉效果。

兼容性与写法建议

虽然现代浏览器普遍支持::selection，但为了兼容一些旧版本浏览器（如旧版Firefox），建议同时使用带前缀的::-moz-selection：

::-moz-selection {
  background-color: #ff6b6b;
  color: white;
}

::selection {
  background-color: #ff6b6b;
  color: white;
}

尽管现在大多数浏览器已不再需要前缀，但在要求高度兼容的项目中保留这一写法仍是良好实践。

实际应用场景示例

假设你正在设计一个深色主题的网页，页面背景为暗灰色，文字为浅灰色。默认的蓝色选中色可能不够清晰或与主题冲突。此时可以这样调整：

body::selection {
  background-color: #005f73;
  color: #fff;
}

这样选中文本后会有更协调的视觉表现，增强可读性与整体美感。

基本上就这些。合理使用::selection能让用户交互细节更精致，尤其是配合品牌色或主题风格时，效果明显又不复杂。

以上就是如何在CSS中使用伪元素::selection控制文本选中样式_结合::selection设置背景颜色的详细内容，更多请关注php中文网其它相关文章！