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