在div和h1上设置字体大小的区别

Question

直接在div容器上设置某些属性与直接在其中的元素上设置属性之间有什么区别？例如font-size：

<div class="the_last_of_us">
  <h5>Cookie Settings</h5>
</div>

Answer 1

在上面的示例中，将font-size上的div设置为h1或h5的主要区别是，设置font-size不会被h5默认情况下，因为它将从用户代理样式表中选择样式，除非您明确定义要继承的样式，例如

h5 {
  font-size: inherit;
}

在font-size上显式设置h5会覆盖用户代理样式表，并设置您为font-size元素定义的h5。

---

在其他情况下，在Parent元素上设置属性是有意义的，Parent元素将被一些元素继承。这将有助于您降低选择器的特异性。例如，color元素可以继承将div设置为h1。

因此，而不是具有类似属性的选择器

div h5 {
  color: #f00;
}

您可以使用

div {
  color: #f00; /* Also applies color to any element inside 
                  the div which can inherit color from the parent element */
}