::selection伪元素用于自定义用户选中文本的样式，如背景色、文字颜色等。它支持color、background-color、cursor和text-shadow属性，常用于提升页面视觉一致性。例如设置::selection { background-color: yellow; color: darkred; }可使全局限选文本呈现黄底深红字。可通过p::selection或.highlight::selection为特定元素定制样式。现代浏览器普遍支持，但需注意避免刺眼配色、保证可读性与对比度，并进行多端测试。这一轻量级技巧有助于增强设计统一性与用户体验。
在网页中，当用户选中一段文字时，默认的高亮颜色通常是蓝色。但通过CSS中的::selection伪元素，我们可以自定义选中文本的样式，比如修改背景色、文字颜色等，从而提升页面的视觉一致性与用户体验。
什么是::selection伪元素？
::selection用于设置用户选中文字时的样式。它只能应用少数几个CSS属性，主要包括：
- color：选中文字的字体颜色
- background-color：选中文字的背景颜色
- cursor：鼠标光标样式（较少使用）
- text-shadow：文字阴影效果
注意：::selection不支持边距、边框、字体大小等其他复杂样式。
基本用法示例
下面是一个简单的例子，将选中文本的背景设为黄色，文字颜色设为深红色：
::selection {
background-color: yellow;
color: darkred;
}
这段样式会影响页面中所有可选中文本的高亮效果。
针对特定元素设置选中样式
如果只想对某个元素内的文本设置特殊高亮效果，可以结合标签或类名使用：
p::selection {
background-color: lightblue;
color: white;
}
.highlight::selection {
background-color: purple;
color: #fff;
}
这样，只有段落或带有highlight类的元素在被选中时才会应用对应的样式。
浏览器兼容性与注意事项
::selection在现代浏览器中支持良好，但在一些旧版本浏览器（如IE8及以下）中不被支持。使用时建议：
- 避免设置过于刺眼的颜色组合，影响可读性
- 在暗色背景上选中文字时，确保对比度足够
- 测试不同设备和浏览器下的显示效果
基本上就这些。通过::selection，你可以轻松统一或美化网页中文本选中的视觉效果，让界面更符合整体设计风格。不复杂但容易忽略的小技巧，值得加入日常开发习惯中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
