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会产生一些后果。例如，请考虑以下两个示例：

＆＃13;

html {
  font-size: 3em;
}

＆＃13;

<h1>Test</h1>

＆＃13;

此处，font-size仅适用于html元素。由于h1具有由用户代理样式表设置的默认大小，即2em，h1文本实际上是6em（2 x 3 = 6）。现在考虑使用*：

＆＃13;

* {
  font-size: 3em;
}

＆＃13;

<h1>Test</h1>

＆＃13;

您会发现这很多更大。这是因为我们已将font-size: 3em应用于每个元素。因此，实际大小为3em（来自html元素）x 3em（来自body元素）x 3em（来自h1元素，将覆盖默认的用户代理样式表）。那就是27em，比我们第一次指定的3em大得多，而且6em带有html { … }！在html和*的副作用方面存在很大差异，因为您正在使用font-size和em。

请记住：关键区别是html选择html元素，而*选择每个单独的元素。这有副作用，因为*适用于所有元素，因此使用em会使文本呈指数级增大。

html和*之间有什么区别吗？

1 个答案: