::selection伪元素用于自定义用户选中文本时的高亮样式，支持修改背景色、文字颜色等；通过设置如::selection { background-color: #ff6b6b; color: white; } 可提升页面视觉一致性，尤其适用于主题化设计，建议同时使用::-moz-selection以保证旧版浏览器兼容性。
当用户在网页上选中一段文本时，浏览器会默认使用浅蓝色作为选中区域的背景色。通过CSS中的::selection伪元素，你可以自定义这部分样式，包括修改背景颜色、文字颜色等，从而提升页面的视觉一致性和用户体验。
什么是::selection伪元素
::selection用于设置用户选中文本时的高亮样式。它只能应用于部分CSS属性，主要是颜色和背景相关的样式。
支持的常用属性包括：
- color：选中文字的前景色
- background-color：选中区域的背景色
- text-shadow：文字阴影
- cursor：光标样式（通常不生效）
注意：::selection不能改变字体大小、边距或布局类属性。
立即学习“前端免费学习笔记（深入）”；
基本语法与背景颜色设置
使用::selection非常简单，直接像普通选择器一样定义即可：
::selection {
background-color: #ff6b6b;
color: white;
}
上面这段代码会将所有被选中文本的背景变为红色，文字变为白色。你也可以针对特定元素设置不同的选中样式：
p::selection {
background-color: yellow;
color: black;
}
h1::selection {
background-color: #4dabf7;
color: white;
}
这样，段落（p）和标题（h1）在被选中时就会有不同的视觉效果。
兼容性与写法建议
虽然现代浏览器普遍支持::selection，但为了兼容一些旧版本浏览器（如旧版Firefox），建议同时使用带前缀的::-moz-selection：
::-moz-selection {
background-color: #ff6b6b;
color: white;
}
::selection {
background-color: #ff6b6b;
color: white;
}
尽管现在大多数浏览器已不再需要前缀，但在要求高度兼容的项目中保留这一写法仍是良好实践。
实际应用场景示例
假设你正在设计一个深色主题的网页，页面背景为暗灰色，文字为浅灰色。默认的蓝色选中色可能不够清晰或与主题冲突。此时可以这样调整：
body::selection {
background-color: #005f73;
color: #fff;
}
这样选中文本后会有更协调的视觉表现，增强可读性与整体美感。
基本上就这些。合理使用::selection能让用户交互细节更精致，尤其是配合品牌色或主题风格时，效果明显又不复杂。
