当我们在CSS中声明变量时，为什么要写：
:root { --bgcolor:orange; } /* instead of */ * { --bgcolor:orange; }
这两件事有什么区别？
wi3ka0sx1#
:root is a pseudo selector that is equivalent to html 99% of the time, but with higher specificity (specificity equal to html + class).:root根据文档的 * format * 选择文档的根元素。它以CSS can be used in other document formats (SVG, XML)的形式存在。*会将css应用到页面上的每个元素。这通常是为规范化、字体等保留的。
:root
html
*
0x6upsns2#
这是因为:root只是<html>元素的一个pseudo selector，当设置CSS自定义属性/变量时，它们是在根元素上设置的--把它当作一个全局变量。如果你使用*（universal selector）--它在DOM中的每个元素（例如div，p，span等）上设置自定义属性/var。使用:root只是允许所有子元素访问该属性/var，而没有为DOM的所有元素计算该属性的不必要开销。
<html>
div
p
span
2条答案
按热度按时间wi3ka0sx1#
:rootis a pseudo selector that is equivalent tohtml99% of the time, but with higher specificity (specificity equal to html + class).:root根据文档的 * format * 选择文档的根元素。它以CSS can be used in other document formats (SVG, XML)的形式存在。*会将css应用到页面上的每个元素。这通常是为规范化、字体等保留的。0x6upsns2#
这是因为
:root只是<html>元素的一个pseudo selector，当设置CSS自定义属性/变量时，它们是在根元素上设置的--把它当作一个全局变量。如果你使用
*（universal selector）--它在DOM中的每个元素（例如div，p，span等）上设置自定义属性/var。使用
:root只是允许所有子元素访问该属性/var，而没有为DOM的所有元素计算该属性的不必要开销。