如何使用 CSS 中的 :root 伪类选择器

了解 CSS 的 :root 伪类选择器，以及在项目中可能想要如何使用它！

CSS 的 :root 伪类选择器用于选择给定规范的最高级父级。在 HTML 规范中，：root 本质上等同于 html 选择器。

在下面的 CSS 片段中，:root 和 html 样式将执行相同的操作：

:root {
  background-color: gray;
}

html {
  background-color: gray;
}

如果你注意到我说 :root 本质上等同于 html 选择器。事实上，：root 选择器比 html 具有更高的优先级。这是因为它实际上被视为伪类选择器（就像 :first-child 或 :hover 一样）。

作为伪类选择器，它比标签选择器具有更高的优先级：

:root {
  background-color: blue;
  color: white;
}

html {
  background-color: red;
  color: white;
}

尽管 html 选择器出现在后面，:root 选择器仍然胜出，这要归功于它更高的优先级！

跨规范

在 HTML 规范中，:root 伪类针对最高级父级：html。

由于 CSS 也设计用于 SVG 和 XML，你实际上可以使用 :root，它将对应到不同的元素。

例如，在 SVG 中，最高级父级是 svg 标签。

:root {
  fill: gold;
}

svg {
  fill: gold;
}

与 HTML 类似，:root 和 svg 标签选择相同的元素，但 :root 选择器的优先级更高。

实际用途

:root 有什么实际用途？正如我们之前所介绍的，它是 html 选择器的安全替代品。

这意味着你可以做任何你通常会用 html 选择器做的事情：

:root {
  margin: 0;
  padding: 0;
  color: #0000FF;
  font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5;
}

如果你愿意，你可以重构这段代码，使用 CSS 自定义属性在全局级别创建变量！

:root {
  margin: 0;
  padding: 0;
  --primary-color: #0000FF;
  --body-fonts: "Helvetica", "Arial", sans-serif;
  --line-height: 1.5;
}

p {
  color: var(--primary-color);
  font-family: var(--body-fonts);
  line-height: var(--line-height);
}

使用 :root 而不是 html 的额外好处是你可以为你的 SVG 图形设置样式！🤯

:root {
  margin: 0;
  padding: 0;
  --primary-color: #0000FF;
  --body-fonts: "Helvetica", "Arial", sans-serif;
  --line-height: 1.5;
}

svg {
  font-family: var(--body-fonts);
}

svg circle {
  fill: var(--primary-color);
}