::selection是CSS伪元素，用于自定义用户选中文本的样式。它支持color、background-color等有限属性，不可使用盒模型属性。基本语法为::selection { background-color: #ff6b6b; color: white; }，可针对特定元素如p::selection设置样式。为兼容旧版浏览器，建议添加::-webkit-selection前缀。现代浏览器普遍支持标准写法，合理使用可提升页面视觉一致性和用户体验。
在网页中，当用户选中一段文字时，默认会显示浏览器设定的背景色（通常是蓝色）和文字颜色。通过CSS的::selection伪元素，我们可以自定义这段被选中文本的样式，包括背景色、文字颜色、字体粗细等，从而提升页面的视觉一致性和用户体验。
什么是::selection？
::selection 是一个CSS伪元素，用于设置用户选中内容时的样式。它只能应用有限的样式属性，主要包括：
- color（文字颜色）
- background-color（背景颜色）
- cursor
- caret-color
- text-shadow
- background-image（部分浏览器支持）
- text-decoration（部分属性）
注意：不能使用 margin、padding、border 等盒模型相关属性。
基本语法与用法
使用 ::selection 非常简单，直接在CSS中定义即可：
立即学习“前端免费学习笔记（深入）”；
::selection {
background-color: #ff6b6b;
color: white;
}
上述代码表示：所有被用户选中的文本，背景将变为红色（#ff6b6b），文字颜色变为白色。
为特定元素设置选中样式
如果只想对某类元素（如段落或标题）应用特殊的选中效果，可以结合标签或类名使用：
p::selection {
background-color: yellow;
color: black;
}
<p>.highlight::selection {
background-color: green;
color: #fff;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}</p>这样，只有 <p> 标签内的文本或带有 highlight 类的元素，在被选中时才会应用对应的样式。
兼容性与注意事项
::selection 在现代浏览器中支持良好，但为了兼容旧版本，建议添加Webkit前缀：
/* 兼容Chrome、Safari等基于Webkit的浏览器 */
::-webkit-selection {
background-color: #ff6b6b;
color: white;
}
<p>/<em> 标准语法 </em>/
::selection {
background-color: #ff6b6b;
color: white;
}</p>Firefox 和 Edge 等主流浏览器已支持标准写法，但加上 ::-webkit-selection 可确保更广泛的兼容性。
基本上就这些。通过合理使用 ::selection，可以让网页在用户交互时更具美感和品牌一致性。不复杂但容易忽略的小细节，值得加入你的CSS工具箱。
