直接在父元素（和继承）或子元素上使用CSS样式？

Question

一般而言，当我们有一些应该一起设置样式的子元素时，我们应该将该样式放到父级并让继承起作用，还是子元素本身呢？ 例如，如果我们具有以下结构：

<div class="foo">
  <p>should be 2em</p>    
  <ul>
    <li>should be 2em</li>
    <li>should be 2em</li>
  </ul>
</div>

那么我应该这样做吗：

.foo {font-size: 2em;}

或类似的东西？

.foo p, .foo li {font-size: 2em;}

我认为这个问题是非常基本的，但是对不起，我找不到任何好的google结果。

Answer 1

这是一个好问题。 我相信您应该让层叠工作正常进行-这就是CSS的全部意义（ 层叠样式表 ）。 如果您喜欢使用更明确的方法-维护CSS可能会成为噩梦。

例如，如果我给我的父div一种黄色的bg颜色，并且在其中嵌套了另外100个div，以及它们的类/ id，我们就不想一遍又一遍地明确为他们提供background-color：yellow属性再次。

因此，请尝试按作者希望的那样使用它-级联。

Answer 2

您应尽可能使用最小深度，这将通过最大程度地减少“重排”时间和CPU使用量来使您的网站更快

避免使用不必要的复杂CSS选择器-特别是后代选择器-这些选择器需要更多的CPU能力来进行选择器匹配。

src： https ： //developers.google.com/speed/articles/reflow

因此，以您的示例.foo {font-size: 2em;} 。

Answer 3

.foo {font-size：2em;}是正确的