8

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

3 回答 3

8

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

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

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

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

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

于 2012-01-01T06:41:07.383 回答
3

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

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

有关更多信息，请参阅W3 的 CSS 规范中的6.4.3 计算选择器的特异性。

于 2012-01-01T06:38:56.147 回答
-2

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

于 2012-01-01T06:35:43.607 回答