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