CSS-使用通用的“ *”选择器与HTML还是正文选择器？

将样式应用于body标签将应用于整个页面，因此

body { font-family: Verdana }

将应用于整个页面。这也可以用

* {font-family: Verdana} 

这将适用于所有元素，因此似乎具有相同的效果。

我了解这样的原理：在第一种情况下，样式将应用于整个页面的主体一个标签，而在第二种示例中，将字体应用于每个单独的html元素。我要问的是这样做的实际区别是什么，其含义是什么，导致相互使用的原因，情况或最佳实践是什么。

副作用之一当然是速度（+1 Rob）。我最感兴趣的是在功能方面选择一个而不是另一个的实际原因。

这两种CSS选择器之间的功能差异...（我认为）

身体

• 将样式属性应用于body元素。
• 主体中的元素可以继承属性值。一些属性默认为“继承”。
• 与正文中的元素匹配的样式声明可以覆盖继承的样式。

通用选择器*（所有元素）

• 将样式属性应用于所有单个元素。
• 替换继承的样式属性和默认的“初始值”。阻止继承。
• 匹配元素的其他更特定的CSS选择器将替换*所应用的样式属性。

意见建议

1. 将body用于默认继承的样式属性（例如字体，颜色），以便为元素提供合理的默认值，减少每种情况下显式编码的需要，并保留在body下方较低级别包含的元素的能力从父母那里继承。
2. 在这种情况下，最好不要使用通用选择器*。它会中断主体中其他元素之间的继承，并可能迫使您编写更多的CSS规则进行补偿。这可能是减慢页面渲染的一个因素。这取决于页面的大小和内容以及有多少个CSS规则。

试试这个

body { font-family: Verdana }
table { font-family: Arial }

反对

* { font-family: Verdana }
table { font-family: Arial }

并查看将哪些样式应用于表格的单元格。

在处理级联样式表时，“应用于整个文档”和“应用于每个文档元素”之间是有区别的。

对主体应用级联样式会将其应用于主体中的所有标签，直到标签覆盖它。然后，将覆盖的样式应用于该标记内的所有标记。

但是，有些样式并不会层叠，例如边距和填充（通常在没有意义的地方）。那些只能应用于特定标记，而通配符可能会很有用（尽管很少）。

大多数非级联样式还具有继承值（例如margin: inherit），这意味着“采用父标记的值”。

我忘记了完整的细节，但是使用*选择器时，随着浏览器解析CSS并应用样式时对每个元素进行评估，性能会降低。iirc，在这种情况下，将字体设置为仅父字体为每个元素提供一个引用，并且不需要其他工作。

还有其他一些问题，但是，我又一次不记得所有这些问题，而且多年来都没有使用过*。

良好的CSS设计的一般准则应尽可能具体，但不能过多。

因此，在您的示例中，将样式应用于body元素将尽可能具体，当然比“ *”选择器更加具体。

正如其他人所说，body { font-family: Verdana }将选择字体贝尔德纳只有那些元素继承了font-style其父母的特性，使得它所有的家长也继承财产eventualy形成的body元件，并且* {font-family: Verdana}将选择字体贝尔德纳到所有的元素。我想用一个例子来说明不同之处：

使用主体选择器：

body 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Not Courier :("> 
</form>

使用通用选择器*：

* 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Courier :)"> 
</form>

使用示例的css和html代码，您将认识到该<input>元素根本不会继承字体样式，因此，您在表单中键入的任何内容都会得到用户代理样式表的默认字体样式。在第二个示例中，通用选择器*为包括input元素的每个元素显式设置字体样式。