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查看，但我在此处为潜在的未来读者提供了代码。）

您可能会在列表中注意到，最终的 li 已分配了一个ID。当我将此规则添加到CSS时：

#get_started {
color:#3C0;
}

什么都没发生。我的理解是，CSS文档中稍后出现的A. 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。如果一个人拥有比另一个更多的身份证，那么它就赢了，你就完成了。

如果它是相同的数字（在这种情况下两者都有一个），则转到类的数量。同样，如果一个人的课程比另一个课程多，那么它就赢了，你就完成了。在这种情况下，两者都没有类。

所以我们继续讨论标签名称的数量。再一次，如果有一个标签名称更多，它就会获胜。此处#header ul li a中有三个标记（ul，li和a），而#get_started则没有。你输了。现有选择器胜出。

你可以解决这个问题只有#header #get_started现在有两个ID，但我更倾向于将其描述为：

#header ul li a#get_started

Answer 2

#header ul li a的特异性高于#get_started

您应该阅读specificity上的w3c规范。

编辑添加：

请记住，尽管特异性通常以10的方式写成，10个元素永远不会比一个类更具体，10个类永远不会比一个id更具体。

E.X。

html body div table tbody tr td ul li a的具体程度低于.some-link-class

Answer 3

查看精彩视频：

Understanding CSS Specificity

Answer 4

你可以试试吗

#get_started {
color:#3C0!important; // this will take the priority
}

Answer 5

你试过吗？

#get_started:link {
    color:#3C0;
}

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

5 个答案: