如何使用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);
}

有关 :root 伪类选择器的大量文档，请访问 Mozilla 开发者网络