通过::selection伪元素可自定义网页文本选中样式，支持color、background-color、text-shadow等属性，示例中设置全局选中文字为白色、背景蓝色（1. ::selection { color: white; background-color: #007acc; }），也可针对特定元素如带highlight类的段落设置黄字红底（2. p.highlight::selection { color: yellow; background-color: red; }），或为h1、code分别设定不同高亮风格，现代浏览器均支持该特性，建议作为顶层规则书写以确保生效。
当用户在网页中选中文本时，浏览器会默认给选中的文本添加背景色（通常是蓝色）。通过CSS的::selection伪元素，我们可以自定义这部分高亮样式，提升页面视觉体验和品牌一致性。
::selection 伪元素简介
::selection用于设置用户选中文本时的样式。它只能应用有限的CSS属性，主要包括：
- color：改变选中文字的前景色
- background-color：设置选中区域的背景色
- text-shadow：为文字添加阴影效果
- cursor：虽然不常用，但某些浏览器支持修改光标样式
注意：::selection不能设置边框、字体大小或变换等复杂样式。
基本用法示例
以下是一个基础的文本高亮样式定制：
::selection {
color: white;
background-color: #007acc;
}
这段代码会让所有被选中的文本显示为白色文字，背景为蓝色。
针对特定元素定制选中样式
如果只想对某个容器内的文本生效，可以结合选择器使用：
p.highlight::selection {
color: yellow;
background-color: red;
}
这样只有带有highlight类的段落中文本被选中时，才会显示黄字红底的效果。
也可以分别设置不同元素的选中风格：
h1::selection {
background: pink;
}
code::selection {
background: lightgray;
color: black;
}
兼容性与注意事项
现代浏览器普遍支持::selection，但旧版IE（IE8及以下）不支持。为了更好的兼容性，部分开发者仍会同时写::-moz-selection（Firefox早期语法），但现在已不再必要。
需要注意的是，::selection不能嵌套在其他规则内（如媒体查询中），否则可能失效。应将其作为顶层规则书写。
基本上就这些。合理使用::selection能让页面细节更精致，尤其适合博客、文档类网站提升阅读体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
