CSS3 的 :root 伪类和 html 有什么区别？答案

【问题标题】：What's the difference between CSS3's :root pseudo class and html?CSS3 的 :root 伪类和 html 有什么区别？
【发布时间】：2013-03-31 17:54:04
【问题描述】：

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

Smashing Magazine 似乎是在说html 和:root 是同一个东西，但肯定有一点区别吗？

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

来自W3C wiki：

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

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

来自specification（强调我的）：

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

【讨论】：

【解决方案3】：

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

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

&lt;div&gt;hello world&lt;/div&gt;

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

【讨论】：