如何使用 CSS 中的 :root 伪类选择器

:root 伪类选择器在 CSS 中表示文档的根元素。根元素是文档的最顶级元素，在 HTML 中通常是 html 元素。使用 :root 可以设置应用于整个文档的样式，无论文档的根元素是什么。

:root 可以用来定义全局变量，这些变量可以在整个文档中使用，并可以用于计算其他样式值。

例如，你可以在 :root 中定义一些颜色变量，然后在其他 CSS 规则中使用这些变量：

:root {
  --main-bg-color: #f3f3f3;
  --main-text-color: #333;
}
 
body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
}
 
/* 更多样式规则可以继续使用这些变量 */

在上面的例子中，:root 定义了两个变量 --main-bg-color 和 --main-text-color，然后在 body 选择器中使用了这些变量来设置背景颜色和文本颜色。

:root 也可以用来设置基本字体大小，然后使用 rem 单位来设置其他元素的字体大小，这样可以确保整个文档的缩放一致性：

:root {
  font-size: 16px;
}
 
body {
  font-size: 1rem; /* 这将会被解析为 16px */
}
 
h1 {
  font-size: 2rem; /* 这将会被解析为 32px */
}

在上面的例子中，:root 设置了基本的字体大小为 16px，然后在 body 中使用 1rem 来引用这个大小，而 h1 使用 2rem 来扩大字体大小至 16px 的两倍。