:root 伪类选择器详解：在 CSS 中如何使用 :root 设置全局变量

:root 是 CSS 伪类选择器，用于选取文档的根元素。在 HTML 文档中，根元素指的是 '' 元素。

在给根元素添加样式时，可以使用 :root 伪类选择器来选取根元素。例如，给根元素设置全局变量可以通过 :root 来实现，如上述代码中的 --status-bar-height 变量。

在这个例子中，通过设置 --status-bar-height 变量的值为 {{statusBarHeight}}px，可以动态地设置根元素的 --status-bar-height 变量的值，从而实现对应的样式效果。