更具体的 CSS 规则不起作用答案

【问题标题】：More specific CSS rule is not working更具体的 CSS 规则不起作用
【发布时间】：2012-01-31 07:15:54
【问题描述】：

在我的以下代码中，我为 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>

【问题讨论】：

不，#inner h1 并不比 #container h1 更具体。它们都具有 101 的特异性（我相信，htmldog.com/guides/cssadvanced/specificity）。仅仅因为一个元素在另一个元素的 INSIDE 中，并不会使里面的元素更具体。
@Charlie：请注意，它并不是字面上的 101 - 11 个类选择器，例如，不会覆盖单个 ID 选择器。它更像是一零一。

【解决方案1】：

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

【讨论】：

【解决方案2】：

它们都具有相同的特性，正如您所注意到的，它们在样式表中出现的顺序是应用样式规则的决定因素。

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

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

【讨论】：

【解决方案3】：

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

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

使用这个 sn-p，您将不得不违背您最初的猜测，即 inner 应该更具体。这意味着您的解释需要上下文（CSS 没有）。

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

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

【讨论】：