css - :root pseudo class 的用途

Question

我刚刚找到了 :root 伪类。

The :root CSS pseudo-class matches the root element of a tree representing the document. Applied to HTML, :root represents the element and is identical to the selector html, except that its specificity is higher.

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

它到底有什么用？当您可以只使用 html 选择器时，为什么除了更高的特异性之外还有人会使用它？

Answer 1

这里的答案是:

except that its specificity is higher.

为什么重要？

在正常的 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 伪类将正确选择其他类型文档的根。