通过::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;
}
/ Mozilla Firefox /
::-moz-selection {
color: #fff;
background-color: #007acc;
}
/ 标准语法 /
::selection {
color: #fff;
background-color: #007acc;
}
注意:Firefox 从版本 62 开始已弃用 -moz- 前缀,现代标准推荐直接使用 ::selection。针对特定元素设置
你也可以只为某些元素定义选中样式,比如只修改段落或标题的选中效果:
p::selection {
background-color: yellow;
color: black;
}
code::selection {
background-color: #ffcccc;
color: red;
}
这样只有 内的文字被选中时,才会应用对应样式。注意事项
使用 ::selection 时需注意以下几点:- 只能设置有限的几个文本相关样式,不能设置边距、尺寸等布局属性
- 不支持所有 CSS 属性,例如 border、padding 等无效
- 透明背景(如 transparent 或 rgba(0,0,0,0))可能导致不可见选中状态,影响可访问性
- 建议保留足够的对比度,保证选中文字仍可清晰阅读
基本上就这些。合理使用 ::selection 能提升用户体验,让界面更统一美观。










