CSS :: selection自动交换颜色和背景颜色

Question

我正在使用::selection CSS构造。假设我的文字在白色背景上用黑色书写，但是对于一些用蓝色，绿色或红色书写的元素。我希望在选择时，文字的颜色和背景颜色都会被交换：正常的文字在黑色上是白色的，红色的文本在红色上是白色的......等等。

当然，我知道如何通过为我所拥有的每种文本制定具体规则来做到这一点。但是我想知道是否有一种简单的方法可以自动完成这项工作，而无需考虑我所有可能的文本。

Answer 1

不幸的是，没有办法自动执行此操作：我们必须采用指定字体颜色的最接近的是background-color: currentColor，但是一旦将color设置为任何其他值，currentColor将采用新值而不是原始值。

意思是，这条规则：

::selection {
    background-color: currentColor;
    color: white;
}

实际上将文本颜色和背景颜色都设置为白色，因为currentColor最终计算到white，在color: white声明之后。无论您是在background-color声明之前还是之后都放置它。

这是一个interactive fiddle来向您展示我的意思。