css ::selection选中内容样式自定义

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《css ::selection选中内容样式自定义》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

通过::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>

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

注意事项