直接用::selection统一控制文本选中效果，需兼顾颜色搭配、可读性与品牌调性；全局设基础规则，按内容类型差异化定制，适配深色模式与浏览器差异，并避开transform、overflow等导致失效的常见陷阱。
直接用 ::selection 就能统一控制文本被选中时的视觉效果，关键不是“加不加”，而是颜色搭配是否贴合整体排版、是否兼顾可读性与品牌调性。
全局统一风格，强化页面一致性
在 CSS 顶层写一条基础规则，让所有普通文本选中时呈现协调的高亮效果：
- 背景色建议选比主色稍深或对比明确的纯色（如
#4a90e2或#27ae60），避免使用默认蓝或过浅灰 - 文字颜色必须与背景形成足够对比（深底配白字，浅底配深灰字），WCAG 至少满足 AA 级可读性
- 不要设透明背景（如
rgba()），Firefox 会忽略 alpha 值，导致深色页上文字不可见
按内容类型差异化定制
不同语义区块适合不同选中样式，增强信息层级感：
-
h1::selection可用柔和渐变色或浅粉背景，突出标题权威感 -
code::selection推荐浅灰背景 + 深灰文字，保持代码块的冷静专业感 -
blockquote::selection可加轻微text-shadow，让引文高亮更立体 - 带
class="highlight"的段落，可用暖色系（如黄底黑字）制造视觉锚点
适配深色模式与浏览器差异
不能只写一套样式，需主动响应系统偏好和渲染差异：
- 用
@media (prefers-color-scheme: dark)单独定义深色主题下的::selection，比如背景用#4a4a4a，文字用#fff - 旧版 Safari 对
background-color有自动调暗行为，测试时务必真机验证 - 现代浏览器已原生支持标准
::selection，::-moz-selection已废弃；仅对需兼容 Chrome 60 以下版本才加::-webkit-selection
避开常见失效陷阱
样式写对了却没生效？大概率是这些细节卡住了：
- 父容器用了
transform（如scale(0.99)）或overflow: hidden，会切断伪元素继承链 -
input、textarea内部文本不受::selection影响，它们需用::placeholder或 JS 模拟 - 别嵌套在媒体查询或其它规则里——
::selection必须是顶层声明，否则多数浏览器直接忽略 - 如果页面已有高优先级规则（如
div p::selection），全局::selection可能被覆盖，必要时加!important（慎用但有效）
