css ::selection选中内容样式自定义-css教程-PHP中文网

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

P粉602998670

发布： 2025-10-03 18:38:02

原创

1020人浏览过

通过::selection伪元素可自定义网页选中文本的样式，如颜色、背景色和文字阴影，需注意仅支持文本相关属性且应保证可读性。

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

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

基本语法

使用 ::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>

登录后复制

注意：Firefox 从版本 62 开始已弃用 -moz- 前缀，现代标准推荐直接使用 ::selection。

针对特定元素设置

你也可以只为某些元素定义选中样式，比如只修改段落或标题的选中效果：

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

登录后复制

这样只有 <p> 或 <code> 内的文字被选中时，才会应用对应样式。

注意事项

使用 ::selection 时需注意以下几点：

只能设置有限的几个文本相关样式，不能设置边距、尺寸等布局属性
不支持所有 CSS 属性，例如 border、padding 等无效
透明背景（如 transparent 或 rgba(0,0,0,0)）可能导致不可见选中状态，影响可访问性
建议保留足够的对比度，保证选中文字仍可清晰阅读

基本上就这些。合理使用 ::selection 能提升用户体验，让界面更统一美观。

以上就是css ::selection选中内容样式自定义的详细内容，更多请关注php中文网其它相关文章！