使用::selection可自定义文本选中时的高亮样式，如背景色和文字颜色；2. :hover伪类实现鼠标悬停时元素背景色变化，结合transition使过渡更平滑；3. 两者可协同使用但作用时机不同，需避免颜色相近导致视觉冲突，确保选中状态清晰可见。
在CSS中实现文本高亮与背景颜色的变化，可以通过 ::selection 伪元素控制用户选中文本时的样式，结合 :hover 伪类来实现鼠标悬停时的整体背景变化。两者用途不同，但可以协同使用，提升页面交互体验。
::selection 设置文本选中高亮样式
当用户用鼠标选中网页中的文字时，浏览器默认会用蓝色背景高亮显示。你可以通过 ::selection 自定义这个颜色。
注意：::selection 不支持所有CSS属性，通常只能设置 color、background-color、cursor、outline 等。示例：
::selection {
background-color: #ffeb3b; /* 高亮背景为黄色 */
color: #333; /* 文字颜色变深 */
}
:hover 实现悬停背景色变化
使用 :hover 可以让整个元素在鼠标悬停时改变背景色，适用于段落、标题或容器。
立即学习“前端免费学习笔记（深入）”；
示例：
p:hover {
background-color: #f0f0f0;
transition: background-color 0.3s ease;
}
结合使用 selection 与 hover 的注意事项
两者作用时机不同：:hover 是鼠标悬停在元素上触发，而 ::selection 是用户主动选中文本时生效。它们可以共存，但需注意样式优先级和视觉冲突。
- 如果元素 hover 时背景已变色，再选中文本，::selection 的背景色仍会覆盖原有背景，确保高亮可见。
- 建议避免使用相近颜色，防止选中状态不清晰。
- 可在可编辑区域（如 contenteditable）或文章阅读页面中结合使用，增强可读性。
基本上就这些。合理搭配 ::selection 和 :hover，能让文本交互更友好，视觉反馈更明确。不复杂但容易忽略细节。
