可直接用::selection伪元素修改选中文本颜色和背景色，支持color、background-color等有限属性，需加-moz-和-webkit-前缀以兼容旧版浏览器，可通过类名限定作用范围。
可以直接用 ::selection 伪元素修改网页中被用户选中的文字颜色和背景色。
基础写法：设置选中文字的前景与背景
最常用的是同时定义 color（文字颜色）和 background-color（高亮背景色），例如：
::selection {
color: white;
background-color: #3a7ebf;
}
这样，无论在哪段文字上拖选，都会显示白字蓝底效果。注意：该样式默认作用于整个页面所有可选中文本（包括 p、span、div 内的文本等）。
兼容性处理：加浏览器前缀更稳妥
虽然现代浏览器基本支持无前缀的 ::selection，但为了兼容旧版 Safari 和 Chrome，建议补上前缀：
立即学习“前端免费学习笔记（深入）”；
::selection {
color: white;
background-color: #3a7ebf;
}
::-moz-selection {
color: white;
background-color: #3a7ebf;
}
::-webkit-selection {
color: white;
background-color: #3a7ebf;
}
其中 ::-moz-selection 针对 Firefox，::-webkit-selection 覆盖 Safari 和旧版 Chrome。顺序无关紧要，但建议把标准写法放在最前面。
限制作用范围：只对特定区域生效
如果只想让某部分内容有自定义选中样式（比如仅正文区域），可以加上类名或标签限定：
.article ::selection { color: #222; background: #ffeb3b; }p.highlight ::selection { color: #fff; background: #e74c3c; }
注意空格不能省略——.article::selection 表示“class 为 article 的元素自身被选中”，而 .article ::selection 才表示“article 内部任意被选中的文本”。
支持的 CSS 属性有限
::selection 只允许使用少数几个属性，包括：
- color
- background-color
- text-shadow（部分浏览器支持）
- cursor（极少数场景下可用）
像 font-size、border、padding 这类属性无效，设了也不会生效。
