我已经构建了一个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规则带来的蓝色着色仍然优先于着色最终的绿色.我试图确保我做了尽职调查谷歌搜索解决方案,但我找到的所有内容都说ID最优先(这也是我在实践中对我在此问题之前编码的所有内容的理解).
解决方法
如果你试图覆盖一个没有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
