本文介绍如何利用 CSS 自定义属性（CSS Custom Properties）与 ::selection 伪元素，为不同颜色样式的 文本实现“选中时前景色与背景色互换”的动态高亮效果，无需 JavaScript 即可达成语义化、可维护的跨浏览器方案。
本文介绍如何利用 css 自定义属性（css custom properties）与 `::selection` 伪元素，为不同颜色样式的 `` 文本实现“选中时前景色与背景色互换”的动态高亮效果，无需 javascript 即可达成语义化、可维护的跨浏览器方案。
在控制台类 HTML 页面中，常需渲染多色日志文本（如绿色成功信息、红色错误提示），而默认的浏览器文本选中高亮（通常是蓝色背景+白色文字）会严重削弱可读性——尤其当原始文本本身已带色时。原生 ::selection 仅支持全局统一配色，无法响应不同 的独立样式。幸运的是，CSS 自定义属性 + ::selection 的组合提供了一种简洁、声明式且无需 JS 的解决方案。
核心原理：用 CSS 变量解耦样式与逻辑
关键在于将每段文本的前景色（color）和期望的选中背景色（即原始前景色）通过 CSS 变量（如 --color）显式声明，并在 ::selection 中交换使用：
<style>
/* 基础样式：所有 span 继承变量，设置默认背景 */
span {
--bg: black; /* 默认选中时的前景色（即原始背景色）*/
color: var(--color, #000); /* 使用 --color，未定义时回退为黑色 */
background: var(--bg);
}
/* 选中时：背景 = 原始前景色，文字 = 原始背景色 */
span::selection {
background: var(--color, #000);
color: var(--bg);
/* 注意：Chrome/Firefox 支持 ::selection，Safari 需加 -webkit- 前缀（见下方） */
}
/* Safari 兼容性补充 */
span::-webkit-selection {
background: var(--color, #000);
color: var(--bg);
}
</style><div>
<span style="--color: #0cc;">Checking random configurations</span><br><span style="--color: #0cc;">Installing new setup</span><br><span style="--color: #c00;">ERROR</span><br><span style="--color: #0a0; --bg: #f0f0f0;">Success (light bg)</span><br>
done.
</div>
关键细节与注意事项
- ✅ 完全 CSS 驱动：无需 JavaScript 监听或 DOM 操作，性能高效，天然支持 SSR。
- ✅ 按需定制背景：通过 --bg 变量可为特定 指定原始背景色（如示例中 --bg: #f0f0f0），选中时文字将自动变为该色，确保对比度。
- ⚠️ 浏览器兼容性：::selection 在 Chrome、Firefox、Edge 16+ 和 Safari 15.4+ 中稳定支持；旧版 Safari 需 -webkit-selection 前缀（已包含在示例中）。
- ⚠️ 继承限制：CSS 无法直接读取 background-color 计算值用于 ::selection，因此必须显式声明 --bg（即使多数场景下为 black 或 transparent），这是当前纯 CSS 方案的必要约定。
- ? 可扩展性：可结合 CSS 类（如 .log-success { --color: #0a0; }）替代内联样式，提升可维护性；亦可配合 :is() 或 :where() 选择器批量管理。
总结
此方案以最小侵入性达成「所见即所选」的体验：用户拖选任意颜色文本时，高亮区域自动呈现该文本的反色效果（如红字变黑底红字，青字变黑底青字）。它不依赖框架、不增加运行时开销，且符合现代 CSS 工程实践——将样式逻辑封装于变量，让 HTML 专注语义，CSS 专注表现。对于日志展示、代码片段、终端模拟等多色文本场景，这是一种轻量、可靠且面向未来的解决方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
