芝麻教程

1. :root 介绍

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同 mdn

2. :root的应用场景

应用1：类似html 选择器, 指定样式

:root {
  background: yellow;
}

应用2：申明css 全局变量

在声明全局 CSS 变量时 :root 会很有用：

:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

通过var()函数，使用:root中定义的变量

body {
  background-color: var(--main-hotpink);  /* 设置背景颜色 */
}

CSS 中的 :root 伪类介绍