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

在 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);
}

标签： cssbootstrap-4css-selectors

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