如何为不同颜色文本实现选中时前景背景色互换的个性化高亮？

核心思路 #

利用CSS变量为每个彩色文本元素定义专属的文本颜色，再通过::selection伪元素继承这些变量，实现选中时前景色与背景色的互换。

实现代码 #

HTML 结构

<div class="console-output">
  <span style="--text-color: #0cc;">这是青色文本</span>
  <span style="--text-color: #c00;">这是红色文本</span>
  <span style="--text-color: #0a0;">这是绿色文本</span>
</div>

CSS 样式

/* 基础文本样式 */
.console-output span {
  color: var(--text-color);
  background-color: #fff; /* 默认背景色，可按需调整 */
}

/* 选中状态样式 */
.console-output span::selection {
  background-color: var(--text-color); /* 用文本原有颜色作为选中背景 */
  color: #000; /* 选中后的前景色，可改成白色等其他颜色 */
}

扩展说明 #

如果你的文本颜色是通过类统一管理（而非内联样式），可以把CSS变量定义在类中：

.text-cyan {
  --text-color: #0cc;
  color: var(--text-color);
}

.text-red {
  --text-color: #c00;
  color: var(--text-color);
}

对应的HTML结构：

<span class="text-cyan">这是青色文本</span>
<span class="text-red">这是红色文本</span>

这个方案完全基于CSS实现，无需JavaScript，简单易移植，能自动适配每个文本元素的原有颜色，满足不同彩色文本选中时各自呈现对应互换高亮的需求。

内容的提问来源于stack exchange，提问作者Jib