可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Can't seem to find much information about this.

Smashing Magazine seems to essentially say html and :root are the same thing but surely there must be a difference?

回答1:

From the W3C wiki:

The :root pseudo-class represents an element that is the root of the document. In HTML, this is always the HTML element.

CSS is a general purpose styling language that it can be used with other document types, not only with HTML, such as SVG.

From the specification (emphasis mine):

This specification defines Cascading Style Sheets, level 2 revision 1 (CSS 2.1). CSS 2.1 is a style sheet language that allows authors and users to attach style (e.g., fonts and spacing) to structured documents (e.g., HTML documents and XML applications).

回答2:

One technical difference between them is that :root - being a pseudo class has a greater specificity than html (a type selector)

: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.

回答3:

For a html document, your root element of course is the <html> tag. However you could style an svg document with css and now your :root pseudo class referd to the svg element.

You can use CSS with not only HTML but all XML-like doucments, and that's why :root generally applies to the root element regardless of the document type (which however in 99% of the cases will be html).