如何使用CSS :root 伪类选择文档的根元素（即HTML元素）？

在CSS中，:root 伪类用于选择文档的根元素，即HTML元素。它可以让我们方便地为整个文档设置全局样式。下面我们来详细了解如何使用 :root 伪类。

:root {
    --main-color: red;
}

body {
    background-color: var(--main-color);
}

通过上面的代码，我们定义了一个名为 --main-color 的 CSS 变量，并将它赋值为红色。然后，将这个变量应用于 body 元素的背景颜色。这样，整个页面的背景颜色就会变成红色。

可以看到，我们使用 :root 伪类来定义全局的 CSS 变量。它可以在整个文档中使用，包括嵌套的样式规则。

除了定义全局 CSS 变量外，:root 伪类还可以用于其他样式设置，例如字体大小、行高等。

总结一下，通过使用 :root 伪类，我们可以方便地为整个文档设置全局样式。这是一个非常有用的选择器。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： 如何使用CSS :first-line 伪类选择元素的第一行文本？
• 下一篇： 如何使用CSS :enabled 伪类选择可用的表单元素？