HTML+CSS+JS动态选中文本高亮颜色变化

Question

我使用 HTML 页面来呈现一些控制台输出。此页面的内容非常简单：

<div>
    <span style="color: #0cc;">Checking random configurations</span><br>
    <span style="color: #0cc;">Installing new setup</span><br>
    ...<br>
    <span style="color: #0cc;">Done setup</span><br>
    <span style="color: #0cc;">Start</span><br>
    <span style="color: #c00;">ERROR</span><br>
    done.
</div>

我想自定义所选文本的突出显示方式（用户使用鼠标选择文本），以便前景色成为背景色，背景色成为前景色。

我无法找到使用CSS

highlight

属性来设置用于突出显示整个选择的颜色的方法。

是否有一种简单且可移植的方法（HTML和/或CSS和/或java脚本）来使突出显示颜色相对于当前文本的前景色和背景色发生变化？

编辑：

渲染的文本可以通过多种方式设置样式。正如您在示例中看到的，一些文本是红色的，一些其他文本是青色的，..示例中没有给出许多其他格式。

从用户的角度来看，我希望文本选择突出显示能够适应所选文本（即：红色文本的部分应突出显示为红色/黑色（fg/bg），青色文本的后面部分应为突出显示青色/黑色）。

::selection

让我选择突出显示的FG和BG颜色，但这适用于整个部分。如何将其嵌入到

span

中，以便我可以根据每个部分自定义突出显示？

Answer 1

您可以通过将 CSS 变量设置在需要的位置来简化事情，并且在选择时只需交换颜色和背景颜色：

<style>
  span {
    --bg: black;
  }
  
  span {
    color: var(--color);
    background: var(--bg);
  }
  
  span::selection {
    background: var(--color);
    color: var(--bg);
  }
</style>
<div>
  <span style="--color: #0cc; --bg: pink;">Checking random configurations</span><br>
  <span style="--color: #0cc;">Installing new setup</span><br> ...
  <br>
  <span style="--color: #0cc;">Done setup</span><br>
  <span style="--color: #0cc;">Start</span><br>
  <span style="--color: #c00;">ERROR</span><br> done.
</div>

注意：这不是一个完整的解决方案，因为我只是使用了白色的毯子作为背景，但没有明确定义它。鉴于可以在 ::selection 伪元素上设置的属性非常小，我目前无法了解如何仅使用 CSS 来获取继承或现有的背景颜色。但我将这部分答案留在这里，以防它至少部分有用。

Answer 2

diminta oleh pemimpin saudara untuk membantu 项目 yang sedang ditangani。 Yaitu membawa web 响应 dengan css.