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

我使用一个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>

我想自定义所选文本高亮显示的方式(用户使用鼠标 Select 文本)，以便前景色变为背景色，背景色变为前景色.

我无法使用CSShighlight属性找到方法，该属性设置用于突出显示整个 Select 的 colored颜色 .

有没有一种简单且可移植的方法(HTML和/或CSS和/或Java-SCRIPT)来改变当前文本的前景和背景 colored颜色 ？

编辑:

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

从用户的Angular 来看，我希望文本 Select 突出显示与所选文本相适应(即:红色文本部分应突出显示为红/黑(FG/BG)，青色文本的后面部分应突出显示为青/黑).

::selection让我 Select 高亮的FG和BG colored颜色 ，但这是整个部分的 colored颜色 .我怎样才能把它嵌入到span中，这样我就可以按比例定制亮点了？