CSS文本高亮颜色设置方法

想知道如何自定义网页文本选中高亮颜色？本文详细介绍了使用CSS `::selection` 伪元素来设置文本选中样式的技巧。不同于不存在的`selection-color`属性，`::selection`允许你轻松改变选中文本的背景色(`background-color`)和文字颜色(`color`)，打造个性化视觉效果。文章还涵盖了`::selection`支持的CSS属性范围，以及兼容旧版本浏览器时需要添加的 `-moz-` 前缀。通过实例演示，教你如何为整个页面或特定元素设置独特的高亮颜色方案，提升用户阅读体验。掌握`::selection`，让你的网页文本高亮更具吸引力！

使用::selection伪元素可自定义文本选中样式，如设置background-color和color属性改变高亮颜色，支持有限CSS属性，需注意兼容性及浏览器前缀。

在CSS中，想要自定义文本被选中时的高亮颜色，不能使用 selection-color（这是一个不存在的属性），正确的做法是使用 ::selection 伪元素来设置选中文本的背景色和文字颜色。

如何使用 ::selection 设置选中文本样式

::selection 用于指定用户选中文本时的视觉样式，可以设置背景色、文字颜色（即“高亮颜色”）、甚至字体加粗等。以下是基本用法：

::selection {
  background-color: #ffeb3b;
  color: #212121;
}

上面代码表示：当用户选中文本时，背景变为黄色（#ffeb3b），文字颜色变为深灰色（#212121）。

支持的CSS属性

在 ::selection 中，只能使用有限的几个CSS属性：

• color：选中时的文字颜色
• background-color：选中时的背景色
• cursor
• caret-color
• text-shadow
• background（简写）
• text-emphasis-color

注意：不能使用 margin、padding、font-size 等布局或尺寸相关属性。

兼容性与浏览器前缀

现代浏览器都支持 ::selection，但为了兼容老版本，有时需要添加前缀：

::-moz-selection {
  background-color: #ffeb3b;
  color: #212121;
}
::selection {
background-color: #ffeb3b;
color: #212121;
}

-webkit- 浏览器（Chrome、Safari、Edge）和现代Firefox都支持标准语法，但旧版Firefox需使用 -moz- 前缀。

实际应用示例

如果你想让整个页面的选中文本更清晰可读：

::selection {
  background-color: #d14836; /* 红色背景 */
  color: white;              /* 白色文字 */
  text-shadow: 1px 1px 1px #000;
}

也可以针对特定元素设置不同的选中样式：

.highlight::selection {
  background-color: purple;
  color: yellow;
}

这样只有带有 .highlight 类的元素在被选中时才会显示紫色背景和黄色文字。

基本上就这些。记住关键点：没有 selection-color 属性，要用 ::selection 来控制选中文本的颜色和背景。

终于介绍完啦！小伙伴们，这篇关于《CSS文本高亮颜色设置方法》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！