CSS自定义选中内容样式方法

本文介绍了如何使用CSS的`::selection`伪元素来自定义网页中用户选中文本时的视觉样式，包括字体颜色、背景色和文字阴影等，强调其仅支持文本相关属性且需兼顾可读性与可访问性；同时提供了跨浏览器兼容写法（如`::-webkit-selection`和`::-moz-selection`）、针对特定元素的精细化控制示例，以及实际应用中的关键注意事项，帮助开发者轻松打造更统一、美观且人性化的网页交互体验。

在网页中，当用户用鼠标选中文字时，默认会有一个背景颜色（通常是蓝色）。通过 CSS 的 ::selection 伪元素，我们可以自定义被选中内容的样式，让页面更具个性化和一致性。

基本语法

• color：选中文字的字体颜色
• background-color：选中区域的背景颜色
• text-shadow：文字阴影效果
• background：也可以使用渐变背景

示例代码：

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

兼容性写法

/* WebKit 浏览器（Chrome, Safari） */
::-webkit-selection {
  color: #fff;
  background-color: #007acc;
}
<p>/<em> Mozilla Firefox </em>/
::-moz-selection {
color: #fff;
background-color: #007acc;
}</p><p>/<em> 标准语法 </em>/
::selection {
color: #fff;
background-color: #007acc;
}</p>

针对特定元素设置

p::selection {
  background-color: yellow;
  color: black;
}
<p>code::selection {
background-color: #ffcccc;
color: red;
}</p>

或 内的文字被选中时，才会应用对应样式。

注意事项