:root 和 * 有什么区别？

Question

当我们在CSS中声明变量时，为什么要这样写：

:root
{
    --bgcolor:orange;
}

/* instead of */

*
{
    --bgcolor:orange;
}

这两者有什么区别？

Answer 1

:root

html

:root

根据文档的 format 选择文档的根元素。它的存在是因为 CSS 可以用于其他文档格式（SVG、XML）。

会将 CSS 应用于页面上的每个元素。这通常保留用于标准化、字体等。

Answer 2

这是因为

:root

只是 <html> 元素的

伪选择器

。设置 CSS 自定义属性/变量时，它们是在根元素上设置的 - 将其视为全局变量。

如果您使用

（通用选择器） - 它会在DOM中的每个元素（例如，

div

、

span

等）上设置自定义属性/var。

使用

:root

只是允许所有子元素访问该属性/var，而无需为 DOM 的所有元素进行不必要的计算开销。

Answer 3

和

:root

之间的区别

是通用选择器

:root

是一个伪选择器

其特异性会更高。

:root

它的特异性会降低。