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视为任何公共选择器-任何有效组合的多个选择器。

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