css - 在这种情况下，为什么 CSS ID 不是最高优先级的 CSS 规则？

Question

我已经构建了一个 CSS 导航标题，它在定位、样式化等方面的工作方式完全符合我的要求。这是对其进行样式化的 CSS:

#header ul {
padding:72px 0 0 0;
text-align:center;
}

#header ul, #header ul li {
margin:0;
list-style:none;
}

#header ul li {
display:inline;
}

#header ul li a {
font-size:17px; color:#69C; text-decoration:none;
display:inline-block;
height:44px;
line-height:44px;
margin:3px 6px;
padding:0 26px;
}

#header ul li a:hover {
background:#69C;
color:#FFF;
}

这是列表:

<div id="#header">
   <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">WHAT WE DO</a></li>
      <li><a href="#">ABOUT US</a></li>
      <li><a href="#" id="get_started">GET STARTED TODAY!</a></li>
   </ul>
</div>

非常简单的东西(目前可以在 http://www.pmind.com/staging 上查看，但我在这里包含了代码以供潜在的 future 读者使用)。

您可能会注意到在列表中，最后的 li 有一个分配给它的 ID。当我将此规则添加到 CSS 时:

#get_started {
color:#3C0;
}

没有任何反应。据我了解，A. CSS 文档中靠后的 CSS 规则优先于靠前的规则，而 B. 无论如何，与 ID 选择器一起使用的 CSS 规则具有最高优先级。但很明显，来自早期 CSS 规则的蓝色着色仍然优先于最终的 li 绿色。我试图确保我对解决方案进行了尽职调查，但我发现的所有内容都表明 ID 具有最高优先级(这也是我在实践中对我在这个问题之前编码的所有内容的理解)。

Answer 1

如果您试图覆盖一个没有的选择器有一个有的 ID ，您的困惑会很明显。

不过，在这种情况下，您正在使用 #get_started(它有一个 ID)来覆盖 #header ul li a 里面有一个 ID。

您肯定认为您的 ID 比 #header ID 更具体 — 您并非完全错误 — 但 CSS 并不是这样工作的。它只关心选择器中使用的 ID 数量，而不关心这些 ID 恰好指向哪些元素。

要确定两个选择器中哪一个优先，首先要计算每个选择器中的 ID。如果其中一个的 ID 多于另一个，则它获胜，您就完成了。

如果数字相同(在这种情况下，两者都有一个)，则转到类(class)数量。同样，如果一个类(class)比另一个类(class)多，它就赢了，你就完成了。在这种情况下，两者都有零类。

所以我们继续讨论标签名称的数量。再一次，如果一个人有更多的标签名称，它就会获胜。这里 #header ul li a 中有三个标签(ul、li 和 a)，而 #get_started 没有。你输了。现有选择器获胜。

您可以只使用现在有两个 ID 的 #header #get_started 来解决这个问题，但我更喜欢将其更清楚地描述为:

#header ul li a#get_started