CSS中:root与*选择器的区别及变量定义场景差异

1. 优先级与作用对象不同 #

• :root是匹配文档根元素的伪类（HTML环境中就是<html>标签），属于元素级选择器，优先级比通配符*更高。如果同时用两者定义同一个CSS变量，:root的定义会直接覆盖*的。
• *是通配符选择器，会匹配页面所有元素，它是给每个元素单独设置变量属性，而非通过继承传递变量。

2. 性能开销有明显差距 #

• 用*声明变量时，浏览器需要遍历页面每一个元素并为其添加变量，页面元素越多，渲染开销越大。
• :root只对根元素生效一次，页面其他元素通过CSS继承机制获取变量，性能更高效。

3. 变量的作用域与继承逻辑不同 #

• :root定义的变量属于根元素的属性，所有后代元素通过继承获取这个变量，整个文档里只有根节点保存了变量的初始定义。
• *定义的变量是每个元素自身的属性，子元素看似“继承”的其实是父元素的变量值，但本质上每个元素都有独立的变量副本。如果子元素重新定义变量，会直接覆盖自身的这个副本。

4. 特殊场景的表现差异 #

• 对于Shadow DOM这类独立的文档片段，:root对应的是主文档的根，不会影响Shadow DOM内部元素；而*如果在Shadow DOM内部的样式中使用，会匹配内部所有元素，但主文档的*不会穿透Shadow DOM。
• 处理SVG元素时，:root匹配的是SVG的根节点，而*会匹配SVG内部的所有图形元素，两者作用范围有明显区别。

内容的提问来源于stack exchange，提问作者Varchasav Kumar