html和*有什么区别吗？

Question

是否有例如这两个选择之间有什么区别，

html { 
    font-family: 'Roboto', sans-serif; 
    font-size: 1em; 
} 

和

* { 
    font-family: 'Roboto', sans-serif; 
    font-size: 1em; 
} 

Answer 1

它们是完全不同的。尽管font-size被应用于html时被所有子女继承，但它会级联。但是当您使用*,时，每个元素都会获得属性。对所有元素应用font-size等属性的后果与仅对html。例如，考虑这两个例子：

html { 
 
    font-size: 3em; 
 
}

<h1>Test</h1>

这里，font-size被施加到仅仅html元件。由于h1的用户代理样式表的默认大小为2em，因此h1文本实际上是6em（2 x 3 = 6）。现在考虑使用*：

* { 
 
    font-size: 3em; 
 
}

<h1>Test</h1>

你会看到，这是多大。这是因为我们已应用font-size: 3em至每个元素。因此，实际尺寸为3em（来自html元素）x 3em（来自body元素）x 3em（来自h1元素，默认的用户代理样式表被覆盖）。这使得27em，比我们第一次指定的3em大很多，并且使用html { … }的6em！有是在副作用方面html和*有很大差异，因为您使用的是font-size和em s。

记住：关键区别是html选择html元素，而*选择每个单独的元素。由于*适用于所有元素，因此使用em会使文本指数地变大。