子节点是否继承:root的font-size？全局重置后继承失效原因咨询

嘿，我来帮你把这两个关于CSS继承和:root的问题讲明白～

答案是肯定的。:root本质上就是HTML文档的根元素（也就是<html>标签）的伪类别名，所有可继承的CSS属性（比如font-size、font-family、color这些），默认都会从:root传递给它的子节点。

不过有个重要前提：如果子元素被其他CSS规则直接指定了该属性，那继承来的值就会被覆盖——这也是第二个问题的核心原因。

咱们先拆解你的代码逻辑：

* { font-size: 0; }
:root { font-size: 12pt; font-family: sans-serif; color: silver; }

这里的*是通配符选择器，它会匹配所有元素，包括<h1>这类:root的子元素。这就相当于给每个子元素都直接设置了font-size:0，而CSS中，直接应用在元素上的样式优先级远高于继承来的样式——哪怕:root的选择器优先级比*高，也没用，因为:root的font-size是传给子元素的继承值，而子元素自己已经被*直接指定了font-size。

你可以观察到，font-family和color是能正常继承的，因为*选择器没设置这两个属性，子元素找不到直接指定的值，就会用继承来的:root的样式。

再看第二个代码示例：

* { font-size: 0; }
:root { font-size: 12pt; font-family: sans-serif; color: silver; }
h1 { font-size: 1.8rem; }

这里给<h1>直接指定了font-size:1.8rem，这个规则的优先级比*高，所以会覆盖0；同时rem单位是基于根元素（:root）的font-size计算的，所以最终<h1>的大小是1.8*12pt，能正常显示。

简单总结：继承的样式优先级最低，只要元素被直接指定了某个属性，继承值就会被忽略。你用*给所有元素直接设了font-size:0，子元素自然不会用:root继承来的12pt，除非你给子元素重新指定font-size。

内容的提问来源于stack exchange，提问作者Ben Aston