CSS如何自定义选中文字样式

你是否注意到，当用户在网页上用鼠标选中文字时，默认的蓝色背景有时会与整体设计格格不入？CSS 的 `::selection` 伪元素正是解决这一问题的精巧工具——它允许你自由定制选中文本的颜色、背景色甚至文字阴影，轻松实现品牌一致性和视觉美感；只需几行代码，就能为段落、代码块等特定元素赋予专属选中样式，同时兼顾可读性与跨浏览器兼容性（现代浏览器已普遍支持标准语法，旧版只需补充 `-webkit-` 和 `-moz-` 前缀），让细节体验悄然升级。

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

基本语法

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

示例代码：

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

兼容性写法

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

针对特定元素设置

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

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

注意事项