CSS ::选择自动交换颜色和背景颜色

Question

我正在使用::selectionCSS 构建。假设我的文本是在白色背景上用黑色书写的，但对于某些元素，例如用蓝色、绿色或红色书写。我希望在选择时，文本的颜色和背景颜色会交换：普通文本为黑底白字，红色文本为红底白字，等等......

当然，我知道如何通过为我拥有的每种文本制定特定规则来做到这一点。但我想知道是否存在一种简单的方法可以自动执行此操作，即无需考虑我拥有的所有可能类型的文本。

Answer 1

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

这条规则的意思是：

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

实际上会将文本颜色和背景颜色设置为白色，因为currentColor最终计算为white，在声明之后进行color: white。这与您将其放在声明之前还是之后无关background-color。

这是一个交互式小提琴来向您展示我的意思。