我正在使用 ::selection
CSS 结构。假设我的文本是在白色背景上用黑色书写的,但对于某些元素,例如用蓝色、绿色或红色书写。我希望在选中时交换文本的颜色和背景颜色:普通文本在黑底白字,红色文本在红底白字,等等......
当然,我知道如何通过为我拥有的每种文本设置特定规则来做到这一点。但我想知道是否存在一种自动执行此操作的简单方法,即无需考虑我拥有的所有可能的文本类型。
最佳答案
不幸的是,没有办法自动执行此操作:最接近指定字体颜色的方法是 background-color: currentColor
,但是一旦您设置了 color
任何其他值,currentColor
将采用新值而不是原始值。
意思是,这个规则:
::selection {
background-color: currentColor;
color: white;
}
实际上会将文本颜色和背景颜色都设置为白色,因为 currentColor
最终计算为 white
,取自 color: white
声明。这与您将它放在 background-color
声明之前还是之后无关。
这是一个 interactive fiddle向您展示我的意思。
关于CSS::selection 自动交换颜色和背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9579951/