使用 * 通用选择器和 html 有什么区别？答案

【问题标题】：What is the difference between using the * universal selector and html?使用 * 通用选择器和 html 有什么区别？
【发布时间】：2016-09-09 23:49:56
【问题描述】：

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

例如：

* {
margin: 0;
padding: 0;
}

和

html {
margin: 0;
padding: 0;
}

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

【解决方案2】：

显而易见的答案是简单地使用* {} 通配符选择页面上的所有元素（甚至包括html 元素和任何其他元素，无论它们是否具有类、id 或没有）。

使用html 标记作为选择器只针对html 标记。

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

.parent > * {
    color: red;
}

以上意味着.parent 的任何 DIRECT 后代都将具有红色字体颜色。同样，您可以使用.parent * {} 来定位.parent 的所有后代，无论它们是直接低于还是低于几个级别。

【讨论】：

【解决方案3】：

通用选择器

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

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

HTML 选择器

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

【讨论】：

【解决方案4】：

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

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

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

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

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

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

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

【讨论】：