:root vs html 差异

Published by powerfulyang on Jan 4, 2024

`:root` 的优先级比 `html` 高

:root 与 html 在 CSS 中的主要区别体现在两个方面：作用范围和优先级。

  1. 作用范围:

    • :root: 这是一个伪类，代表文档树的根元素。在 HTML 中，:root 通常指的是 <html> 标签。但是在其他类型的文档中，比如 SVG 或 XML，:root 可能代表不同的元素。
    • html: 直接指 HTML 文档中的根元素 <html>。

  2. 优先级:

    • 在 CSS 中，:root 作为一个伪类，其优先级高于普通的元素选择器。这意味着如果你有相同的属性声明在 :root 和 html 选择器中，:root 中的声明将会覆盖 html 中的声明（除非 html 选择器使用了更强的优先级规则，如 !important）。

举个例子，假设你在 CSS 中这样设置：

css
1:root {
2  color: red;
3}
4
5html {
6  color: blue;
7}

在这种情况下，文档的文字颜色会是红色，因为 :root 的优先级比 html 高。

但要注意的是，大多数情况下，这两个选择器可以互换使用，特别是在只涉及到 HTML 文档的时候。:root 更常见的用途是在定义 CSS 变量时，因为它可以确保变量在整个文档中都是可访问的。