:root 和 html 在 CSS 中有什么区别？

CSS 有两种方式可以定位 HTML 文档的根元素 - :root 伪类和 html 选择器。虽然它们非常相似，但它们有一些你应该了解的区别。

选择器特异性

:root 选择器的特异性高于 html 选择器。这是因为 :root 是一个伪类选择器，而 html 是一个类型选择器。

:root {
  background-color: red;
}

html {
  background-color: blue;
}

/* HTML 文档的根元素将具有红色的背景颜色。 */

定位根元素

CSS 可以用于为除了 HTML 之外的其他类型的文档设置样式。这就是 :root 元素的作用，它允许你为文档的根元素设置样式。这在为 SVG 文档设置样式时尤为重要，因为 html 选择器在这种情况下无法工作。