令人困惑的CSS规则优先级

Question

我有这个(简化的)标记:

<ul id="topnav">
    <li>one</li>
    <li>two</li>
    <li id="last-nav">last</li>
</ul>

和这些CSS规则:

#topnav li {
  list-style-type: none;
  float: left;
}

#last-nav {
    float: right;
}

令我惊讶的是,第二条规则被第一条规则推翻.如果我将选择器更改为li#last-nav,则可以.这是为什么？

(免责声明:我只在Firefox中测试过这个)

Answer 1

级联的工作方式如下:

1. 更重要的规则适用.
2. 如果同样重要,则适用更具体的规则.
3. 如果同样具体,后一条规则适用.

这里,#topnav li具有101 的特异性,并且#last-nav具有100的特异性,因此第一个获胜.选择器li#last-nav或#topnav #last-nav将更具体.

Answer 2

阅读CSS特异性:

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
http://meyerweb.com/eric/css/link-specificity.html

本质上,第一个选择器比第二个选择器更具体,因此它优先.这不是关于CSS的自上而下的顺序.自上而下的订单仅适用于两个选择器具有同等特定性的情况.

Answer 3

选择器规则:计算特异性

样式表还可以根据其特定级别覆盖冲突的样式表,其中更具体的样式总是胜过不太具体的样式.它只是一个计算游戏来计算选择器的特异性.

• 计算选择器中ID属性的数量.
• 计算选择器中CLASS属性的数量.
• 计算选择器中HTML标记名称的数量.

最后,按照确切的顺序写下三个数字,不要使用空格或逗号来获得三位数字.(注意,您可能需要将数字转换为更大的基数,最终得到三位数.)与选择器相对应的最终数字列表将很容易确定特异性,较高的数字胜过较低的数字.以下是按特异性排序的选择器列表:

#id1         {xxx} /* a=1 b=0 c=0 --> specificity = 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 --> specificity = 013 */
LI.red       {xxx} /* a=0 b=1 c=1 --> specificity = 011 */
LI           {xxx} /* a=0 b=0 c=1 --> specificity = 001 */

在你的例子中#topnav li是101而且#last-nav只有100,所以101胜.

引用自http://htmlhelp.com/reference/css/structure.html