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，向您展示我的意思。