Question

知道这可能是一个荒谬的问题，但使用* universal选择器之间的区别是什么，我知道它适用于页面上的每个元素并仅使用html？

例如：

* {
margin: 0;
padding: 0;
}

和

html {
margin: 0;
padding: 0;
}

Answer 1

*通配符适用于页面中的所有元素，与它具有的标记，类名，ID或属性无关。

html仅适用于<html>元素。

示例：

* {
  color:red;
}

div {
  color: green;
}

<p>this is red</p>
<p>this is red</p>
<div>this is red but styling specifically to green</div>
<p>this is red</p>

Answer 2

通用选择器

在CSS中，您通常希望尽可能具体，因此使用通用选择器通常不是最佳方法。

通用选择器*将特定样式应用于整个DOM中的每个元素，而不管其标记如何。此外，通用方法可能会干扰默认继承，因为*样式仍可以覆盖更具体的样式。

HTML选择器

html选择器仅适用于存在的单个<html>元素。这仍然允许继承和特异性按预期运行（因为它仅仅针对单个父元素，而不是单独针对所有子元素。）

Answer 3

将样式应用于html将与任何其他元素及其子元素一样工作：样式从顶部开始流行，除非子项具有自己的定义。

使用*可以单独设置每个元素的样式，因此它应用于每个第一级元素，第二级元素等等。

实际差异的一个例子是使用>运算符，它将样式应用于直接元素的子元素：

* > p {
    font-size: 12px;
}

将字体大小设置为每个p，它直接是DOM中任何元素的子元素，无论它有多深。

html > p {
    font-size: 12px;
}

将设置直接作为html元素子元素的每个p的字体大小，这不会发生，因为body和head通常是{{1}的唯一子元素}}

Answer 4

显而易见的答案是，只需使用* {} wilcard选择页面上的所有元素（甚至包括html元素和任何其他元素，无论它们是否具有类，是否具有id。）

使用html标记作为选择符只需定位html标记。

*通配符非常有用，因为您还可以使用它来定位其他元素的所有子元素，即：

.parent > * {
    color: red;
}

以上意味着.parent的任何DIRECT后代都将具有红色的字体颜色。类似地，您可以.parent * {}定位.parent的所有后代，无论他们是直接位于下方，还是位于以下几个级别。