更具体的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由a标识的元素的后代id),并且选择器不会给较近的后代赋予更高的优先级.

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