CSS伪元素::selection文本高亮样式控制_选中文本样式定制

通过::selection伪元素可自定义网页文本选中样式，支持color、background-color、text-shadow等属性，示例中设置全局选中文字为白色、背景蓝色（1. ::selection { color: white; background-color: #007acc; }），也可针对特定元素如带highlight类的段落设置黄字红底（2. p.highlight::selection { color: yellow; background-color: red; }），或为h1、code分别设定不同高亮风格，现代浏览器均支持该特性，建议作为顶层规则书写以确保生效。

当用户在网页中选中文本时，浏览器会默认给选中的文本添加背景色（通常是蓝色）。通过CSS的::selection伪元素，我们可以自定义这部分高亮样式，提升页面视觉体验和品牌一致性。

::selection 伪元素简介

::selection用于设置用户选中文本时的样式。它只能应用有限的CSS属性，主要包括：

• color：改变选中文字的前景色
• background-color：设置选中区域的背景色
• text-shadow：为文字添加阴影效果
• cursor：虽然不常用，但某些浏览器支持修改光标样式

注意：::selection不能设置边框、字体大小或变换等复杂样式。

基本用法示例

以下是一个基础的文本高亮样式定制：

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

::selection {
  color: white;
  background-color: #007acc;
}

这段代码会让所有被选中的文本显示为白色文字，背景为蓝色。

针对特定元素定制选中样式

如果只想对某个容器内的文本生效，可以结合选择器使用：

BlessAI

Bless AI 提供五个独特的功能：每日问候、庆祝问候、祝福、祷告和名言的文本生成和图片生成。

89

查看详情

p.highlight::selection {
  color: yellow;
  background-color: red;
}

这样只有带有highlight类的段落中文本被选中时，才会显示黄字红底的效果。

也可以分别设置不同元素的选中风格：

h1::selection {
  background: pink;
}

code::selection {
  background: lightgray;
  color: black;
}

兼容性与注意事项

现代浏览器普遍支持::selection，但旧版IE（IE8及以下）不支持。为了更好的兼容性，部分开发者仍会同时写::-moz-selection（Firefox早期语法），但现在已不再必要。

需要注意的是，::selection不能嵌套在其他规则内（如媒体查询中），否则可能失效。应将其作为顶层规则书写。

基本上就这些。合理使用::selection能让页面细节更精致，尤其适合博客、文档类网站提升阅读体验。

以上就是CSS伪元素::selection文本高亮样式控制_选中文本样式定制的详细内容，更多请关注php中文网其它相关文章！