如何在CSS中使用::selection自定义选中文本样式_通过::selection改变文字背景和颜色

::selection是CSS伪元素，用于自定义用户选中文本的样式。它支持color、background-color等有限属性，不可使用盒模型属性。基本语法为::selection { background-color: #ff6b6b; color: white; }，可针对特定元素如p::selection设置样式。为兼容旧版浏览器，建议添加::-webkit-selection前缀。现代浏览器普遍支持标准写法，合理使用可提升页面视觉一致性和用户体验。

在网页中，当用户选中一段文字时，默认会显示浏览器设定的背景色（通常是蓝色）和文字颜色。通过CSS的::selection伪元素，我们可以自定义这段被选中文本的样式，包括背景色、文字颜色、字体粗细等，从而提升页面的视觉一致性和用户体验。

什么是::selection？

::selection 是一个CSS伪元素，用于设置用户选中内容时的样式。它只能应用有限的样式属性，主要包括：

• color（文字颜色）
• background-color（背景颜色）
• cursor
• caret-color
• text-shadow
• background-image（部分浏览器支持）
• text-decoration（部分属性）

注意：不能使用 margin、padding、border 等盒模型相关属性。

基本语法与用法

使用 ::selection 非常简单，直接在CSS中定义即可：

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

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

上述代码表示：所有被用户选中的文本，背景将变为红色（#ff6b6b），文字颜色变为白色。

小绿鲸英文文献阅读器

英文文献阅读器，专注提高SCI阅读效率

352

查看详情

为特定元素设置选中样式

如果只想对某类元素（如段落或标题）应用特殊的选中效果，可以结合标签或类名使用：

p::selection {
  background-color: yellow;
  color: black;
}
<p>.highlight::selection {
background-color: green;
color: #fff;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}</p>

这样，只有 <p> 标签内的文本或带有 highlight 类的元素，在被选中时才会应用对应的样式。

兼容性与注意事项

::selection 在现代浏览器中支持良好，但为了兼容旧版本，建议添加Webkit前缀：

/* 兼容Chrome、Safari等基于Webkit的浏览器 */
::-webkit-selection {
  background-color: #ff6b6b;
  color: white;
}
<p>/<em> 标准语法 </em>/
::selection {
background-color: #ff6b6b;
color: white;
}</p>

Firefox 和 Edge 等主流浏览器已支持标准写法，但加上 ::-webkit-selection 可确保更广泛的兼容性。

基本上就这些。通过合理使用 ::selection，可以让网页在用户交互时更具美感和品牌一致性。不复杂但容易忽略的小细节，值得加入你的CSS工具箱。

以上就是如何在CSS中使用::selection自定义选中文本样式_通过::selection改变文字背景和颜色的详细内容，更多请关注php中文网其它相关文章！