css - CSS3 的 :root 伪类和 html 有什么区别？

Question

我似乎找不到太多关于此的信息。

Smashing Magazine似乎是这么说的，html而且:root是一回事，但肯定有一点区别吗？

score 107 · Accepted Answer

:root伪类表示作为文档根的元素。在 HTML 中，这始终是 HTML 元素。

CSS 是一种通用的样式语言。它可以与其他文档类型一起使用，不仅可以与 HTML 一起使用，还可以与 SVG 一起使用。

从规范（强调我的）：

本规范定义了层叠样式表，第 2 级修订版 1 (CSS 2.1)。CSS 2.1 是一种样式表语言，它允许作者和用户将样式（例如，字体和间距）附加到结构化文档（例如，HTML 文档和 XML 应用程序）。

score 104 · Accepted Answer

它们之间的一个技术区别是- 作为伪类比（类型选择器）:root具有更大的特异性html

:root {
  color: red
}
html {
  color: green;
}

<div>hello world</div>

因此，在上面的示例中，:root选择器覆盖了html选择器并且文本显示为红色。

score 32 · Accepted Answer

对于 HTML 文档，没有区别 - 您的根元素是<html>标签，因此html{}和:root{}（除了特异性不同）在语义上是等价的。

但是，您不仅可以将 CSS 应用于 HTML，还可以将 CSS 应用于所有类似 XML 的文档。这就是为什么:root存在 - 无论文档类型如何，都以文档的根元素为目标。大多数人对这种差异感到困惑，因为 CSS 的压倒性主要用例是样式化 HTML 文档。

示例：您可以使用 CSS 设置 SVG 文档的样式。设置样式时，您的根元素将（显然;-)）不是htmlbut svg。请参阅以下SVG 标记列表。

3 回答 3