混乱的CSS规则优先级

级联的工作方式如下:

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

在这里, #topnav li 有一个 specificity 第101页,以及 #last-nav 有100的特异性,所以第一个赢了。选择 li#last-nav 或 #topnav #last-nav 会更具体一些。

了解CSS的特殊性:

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

从本质上讲,第一个选择器比第二个选择器更具体,因此它具有优先权。这与CSS中的自上而下顺序无关。只有当两个选择器都具有相同的特定性时,自上而下顺序才适用。

选择器规则:计算专用性

样式表还可以根据其特定性级别覆盖冲突的样式表,在这种情况下,更特定的样式将总是胜过不太特定的样式。这只是一个计数游戏来计算选择器的特殊性。

• 计算选择器中ID属性的数量。
• 计算选择器中类属性的数量。
• 计算选择器中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

你可以具体解释一下。

这样想:

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更为具体

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

li#last-nav {  }

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

使用:

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

或

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

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

具体规则可能正在发挥作用: http://www.w3.org/TR/CSS2/cascade.html#specificity

现代浏览器可能会让您摆脱:

#topnav li:last-child {

浮动:右; }

…达到你想要的结果。

HTH公司,

克

这与你的第一种风格比第二种风格有更多的特殊性有关。退房 this site 更多细节。若要使第二种样式正常工作,请尝试使用:

#topnav #last-nav