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開發人員網絡。

翻譯自: https://www.digitalocean.com/community/tutorials/css-root-pseudo-class

css僞類選擇器