更具体的CSS规则不起作用

Question

在我的下面的代码中，我已经为h1定义了更具体的规则作为#inner h1，并且为#container h1定义了更少的特定规则。但是如果将#container h1放在#inner h1之后然后它会生效并且#inner h1被忽略，而它不应该是因为它更具体。

请帮助我理解这个问题。

CSS：

#inner h1 { font-size:25px; }
#container h1 { font-size:15px; }

HTML：

<div id="container">
  <div id="inner">
    <h1>Hello World!</h1>   
  </div>
</div>

Answer 1

可能你的特异性想法有点偏差。特异性必须是一个无上下文的想法：因为CSS可以独立于HTML加载，所以您不必需要HTML文档来猜测哪个规则更“具体”。考虑另一个有效的例子：

<div id="inner">
  <div id="container">
    <h1>Hello World!</h1>   
  </div>
</div>

使用此代码段，您将不得不违背inner应该更具体的初步猜测。这意味着您的解释需要上下文（CSS没有）。

关键是，两个规则都具有相同的特异性（由h1标识的元素的id后代），并且选择器不会为更近的后代提供更高的优先级。

如果两个具有相同特殊性的规则适用，则获胜者是CSS中声明的最后一个。

Answer 2

两者具有相同的特异性，并且您注意到，它们在样式表中出现的顺序是应用样式规则的决定因素。

您可以通过多种方式构建规则以获得更高的特异性，但通常我会远离!important修饰符。

有关详细信息，请参阅W3 CSS规范中的6.4.3 Calculating a selector's specificity。

Answer 3

这根本不是问题:) CSS一个接一个地解析类，最后一个规则覆盖了之前的，当然如果前一个不是更具体或者不包含！important语句，你可以放置font-size ：25px！important;在第一个中，它会覆盖最后一个规则，否则只需更改类的位置