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

【问题标题】：Is it okay to have more than one ":root" selector?可以有多个 ":root" 选择器吗？
【发布时间】：2019-04-22 00:45:35
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

糟糕，我已更正错字。我的意思是，可以定义多个 :root 选择器吗？
我可能错了，但如果<style> 或<link rel="stylesheet"> 标记在shadow DOM 中使用，:root 是否也选择web component 的顶层？
@Genki 确定它就像任何常见的选择器一样。
@PatrickRoberts 有点像:host()?