CSS3的: 根伪类和 html 之间有什么区别？

我似乎找不到太多关于这方面的信息。

Smashing Magazine 似乎在说 html和 :root是同一个东西，但肯定存在细微的差别吧？

21760 次浏览
小开
最佳答案

来自 W3C 维基:

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

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

来自 规格(强调地雷) :

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

小开

对于 HTML 文档，没有区别——根元素是 <html>标记，因此 html{}和 :root{}在语义上是等价的(除了特异性不同之外)。

但是，您不仅可以将 CSS 应用于 HTML，还可以将 CSS 应用于所有类 XML 文档。这就是为什么会有 :root的原因——不管文档类型如何，都以文档的根元素为目标。大多数人对这种区别感到困惑，因为 CSS 的绝大多数主要用例是 HTML 文档样式。

例如: 您可以使用 CSS 设计 SVG 文档的样式。在设计样式时，根元素(显然; ——)不是 html而是 svg。请参见下面的 SVG 标签列表。

小开

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

:root {
color: red
}
html {
color: green;
}
<div>hello world</div>

So, in the above example, the :root selector overrides the html selector and the text appears red.

小开

另一件需要考虑的事情是，严格来说可以使用 javascript 替换根元素:

<html>
<body>
<div id=test>
This will become the root element!
<style>
:root { text-decoration: underline; }
html { color: red; } /* this selector will stop working */
</style>
</div>
<button onclick=document.documentElement.replaceWith(test)>click to replace the root</button>
</body>
</html>


提交答案