目的：root伪类

Question

我刚刚找到了:root伪类。

  

：root CSS伪类匹配表示文档的树的根元素。应用于HTML，：root表示元素，与选择器html相同，只是它的特异性更高。

https://developer.mozilla.org/en-US/docs/Web/CSS/:root

究竟用于什么？当你可以使用html选择器时，为什么有人会使用它而不是更高的特异性？

Answer 1

这里的答案是：

  

除了它的特异性更高。

为什么重要？

在正常的CSS场景中，如果你有这样的东西：

html {
    background-color: red;
}

html {
    background-color: blue;
}

您将获得蓝色背景，因为它是最后评估的。您可以看到here。

但是，如果你有这个：

:root {
    background-color: red;
}

html {
    background-color: blue;
}

你会得到红色背景。您可以看到here。

想象一下这样一个场景，你导入了几个库，然后在你想要摆脱的html上设置了一些属性。您可以将您的属性定义为!important，您可以组织导入，以便最后评估您想要的内容，或者您​​可以使用:root选择器。

---

其他情景

正如@ user2864740和@ 13ruce1337所指出的，CSS不仅适用于HTML，还可以应用于any kind of XML document, including plain XML, SVG and XUL。 :root伪类将正确选择其他类型文档的根。