Question

我似乎无法找到关于此的更多信息。

Smashing Magazine似乎在说html和:root是一回事，但肯定会有微小的差异吗？

Answer 1

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

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

<div>hello world</div>

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

Answer 2

来自W3C wiki：

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

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

来自specification（强调我的）：

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

Answer 3

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

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

实施例：您可以使用CSS设置SVG文档的样式。样式化时，你的根元素（显然;-)）不是html而是svg。请参阅以下SVG tags列表。