通过::selection伪元素可自定义文本选中样式，支持color、background-color等有限属性，用于提升视觉效果与可读性；需结合实际背景调整颜色，如深色区域反色处理，并添加::-webkit-selection兼容旧版Safari，确保跨浏览器一致性，适用于博客、多主题页面等场景，增强用户体验。
在网页中，当用户选中一段文本时，默认的高亮样式由浏览器决定。通过CSS中的 ::selection 伪元素，我们可以自定义选中文本的前景色（文字颜色）和背景色，实现更符合设计风格的视觉效果。
基本语法与使用方式
::selection 用于设置用户选中文本时的样式，支持修改颜色、背景色，甚至添加简单效果。注意它只能应用有限的属性：color、background-color、cursor、caret-color、outline 和 text-shadow。
::selection {
color: #fff;
background-color: #007acc;
}
上面代码将选中文本的文字设为白色，背景为蓝色，适用于全局文本。若只针对特定元素，可组合选择器使用：
p::selection {
background-color: yellow;
color: black;
}
结合背景图或深色背景的处理
如果页面背景较复杂（如深色背景或图案），直接使用固定高亮色可能导致文字不可读。此时应根据内容区域调整 ::selection 样式，确保可读性。
立即学习“前端免费学习笔记（深入）”；
例如，在深色卡片中显示浅色文字，选中时可反色处理：
.card {
background: #333;
color: #eee;
}
.card::selection {
color: #333;
background-color: #ffeb3b;
}
这样在深灰背景上，选中后文字变黑、背景变黄，清晰可见。
跨浏览器兼容性注意事项
虽然现代浏览器普遍支持 ::selection，但旧版 Safari 需要使用私有前缀 ::-webkit-selection 来确保兼容。
::selection {
background-color: #d15050;
color: white;
}
::-webkit-selection {
background-color: #d15050;
color: white;
}
加上 WebKit 前缀能覆盖更多移动端和老版本 Safari 浏览器。
实际应用场景建议
- 博客或阅读类网站可用柔和背景色（如浅蓝、淡粉）提升阅读体验
- 避免使用过于刺眼的对比色，防止视觉疲劳
- 若页面有多个主题区域（如亮/暗模式），可分别为其容器定义不同的 ::selection 样式
- 不要在 ::selection 中使用渐变背景或图片，部分浏览器不支持
基本上就这些。合理使用 ::selection 能让文本交互更自然，同时保持品牌一致性。关键是保证选中状态下的文字始终清晰可读。
