有多个 ":root" 选择器可以吗？

Question

在 TWBS 4 中，bootstrap.css 有一个带有颜色变量的:root选择器。

我的子样式表 也可以有一个:root选择器，用于我自己的变量吗？

我猜:root {}可以像任何其他选择器一样被覆盖和添加，但我找不到任何讨论或示例。

到目前为止，我已经将我的颜色变量放在div {}选择器中并且它可以工作，但是我想将它们应用于除之外的元素<div>，所以我似乎应该有自己的:root部分。

这有效：

my_stylesheet.css

div {
  --myColor1: rgba(16, 128, 0, 1.0);
  --myColor2: rgba(16, 128, 0, 0.6);
}

但我想这样做：

:root {
  --myColor1: rgba(16, 128, 0, 1.0);
  --myColor2: rgba(16, 128, 0, 0.6);
}

Answer 1

该:root选择器表示<html>标签并且具有比更高的特异性（优先级）html选择器。此选择器通常用于声明 CSS 变量。除此之外，您可以将其:root视为任何通用选择器——任何有效组合中的多个选择器。