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

级联的工作原理如下：

更重要的规则适用。
如果同样重要，则适用更具体的规则。
如果同样具体，后一条规则适用。

此处#topnav li的{{3}}为101，#last-nav的特异性为100，因此第一个获胜。 <{1}}或li#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

Answer 4

你可以特别解释这个。

这样想：

Elements etc: 0, 0, 0, 1
Classes: 0, 0, 1, 0
IDs: 0, 1, 0, 0
Inline: 1, 0, 0, 0

#topnav li = 0, 1, 0, 1
#last-nav = 0, 1, 0, 0

所以#topnav li更具体，因此优先。

当然级联和无意甚至使用！important可以对CSS产生其他影响，但在这种情况下，＃topnav li只是更具体

Answer 5

最后一条规则具有较低的特异性。尝试更改为：

li#last-nav {  }

仅供参考：您可以使用此工具计算特异性：Specificity Calculator

Answer 6

使用：

#topnav #last-nav {
    float: right;
}

或

#last-nav {
    float: right !important;
}

Answer 7

我不确定，虽然我怀疑，第一条规则优先，因为它被应用于特定元素（在本例中为li）。第二条规则理论上可以应用于ID为last-nav的任何元素。

特殊性规则可能会发挥作用：http://www.w3.org/TR/CSS2/cascade.html#specificity

现代浏览器可能会让您逃脱：

#topnav li:last-child {

浮动：对; }

......并达到你想要的结果。

HTH，

Answer 8

它与你的第一种风格有关，比你的第二种风格更具特异性。查看this site了解更多详情。要使第二种样式正常工作，请尝试使用：

#topnav #last-nav

令人困惑的CSS规则优先级

8 个答案: