选择背景与当前文本块的文本颜色相同

Question

与终端中相同的机制：选择时，选择的颜色应与未选择的文本颜色相同，文本将变为白色。 HTML（+ CSS / JS）中是否有一种方法可以获取每个块的颜色并将其用作此块的选择颜色？

更新：尽管有些人过于紧张并且只是因为他们自己并没有真正理解它并且想出了一个完全不同的问题的解决方案而放弃我的问题，但我得到了一些进展这里。我发现，::selection标签可以与类组合，所以现在唯一的问题是遍历元素和类列表，并使用它们的颜色为每个元素和类创建::selection规则作为选择的背景颜色。现在我明白它应该走向何方。但是如果你在回答我自己的问题之前得到了一个有效的脚本，请成为我的客人。

Answer 1

下面显示了如何为所有元素应用通用选择规则的示例，您可能希望根据需要编辑颜色等。

Sample Fiddle

HTML

<div>Div Text</div>
<span>Span Text</span>
<h2>H2 Text</h2>
<section>Section Text</section>

CSS

body{
    background:black;
}
div {
    color:red;
}
span {
    color:blue;
}
h2 {
    color:orange;
}
section {
    color:green;
}
::selection {
    color:inherit;
    background:white;
}

Answer 2

好的，这是脚本：

$('*').each(function(index){
    color = $(this).css('color');
    id = 'id' + index.toString()
    $(this).attr('id', id);
    rule = '#' + id + '::selection {background-color:' + color + '}';
    document.styleSheets[0].insertRule(rule, 0);
});

结果如下：

也许，它可以更快地与vanilla JS一起工作，但我不知道该怎么做。另外，我可以在负载上稍微滞后。