css伪类选择器_如何使用CSS：root伪类选择器

css伪类选择器

Learn about the CSS :root pseudo-class selector, and how you might want to use it in your projects!

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

The CSS :root pseudo-class selector is used to select the highest-level parent of a given specification. In the HTML specification, the :root is essentially equivalent to the html selector.

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

In the CSS snippet below the :root and html styles will do the same thing:

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

:root {
  background-color: gray;
}

html {
  background-color: gray;
}

If you noticed I said :root is essentially equivalent to the html selector. In fact, the :root selector has more authority than html. This is because it’s actually considered a pseudo-class selector (like :first-child or :hover).

如果您注意到我说的话， :root本质上等效于html选择器。实际上， :root选择器比html具有更多权限。这是因为它实际上被视为伪类选择器(例如:first-child或:hover )。

As a pseudo-class selector, it has more authority/higher specificity than tag selectors:

作为伪类选择器，它比标记选择器具有更多的权限/ 更高的特异性：

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

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

Despite the html selector coming after, the :root selector still wins, thanks to its higher specificity!

尽管html其后的是html选择器，但:root选择器仍然胜出，这归功于其更高的特异性！

交叉规格 (Cross-Specification)

In the HTML specification, the :root pseudo-class targets the highest-level parent: html.

在HTML规范中， :root伪类指定了最高级别的父类： html 。

Since CSS is also designed for SVG and XML you can actually use :root and it will just correspond to a different element.

由于CSS也是为SVG和XML设计的，因此您实际上可以使用:root ，它将仅对应于另一个元素。

For example, in SVG the highest-level parent is the svg tag.

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

:root {
  fill: gold;
}

svg {
  fill: gold;
}

Similar to HTML, the :root and svg tags select the same element, however the :root selector will have higher specificity.

与HTML相似， :root和svg标记选择相同的元素，但是:root选择器将具有更高的特异性。

实际用途 (Practical Uses)

What are the practical uses for :root? As we covered earlier, it’s a safe substitute for the html selector.

:root的实际用途是什么？如前所述，它是html选择器的安全替代品。

This means you can do anything you’d normally do with the html selector:

这意味着您可以执行通常使用html选择器执行的任何操作：

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

If you’d like, you can refactor this code to use CSS Custom Properties to create variables at the global level!

如果愿意，可以重构此代码以使用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);
}

The added benefit of using :root instead of html is that you can style your SVG graphics! 🤯

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

For extensive documentation on the :root pseudo-class selector, visit the Mozilla Developer Network

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