令人困惑的 CSS 规则优先级

发布于 2024-10-02 01:57:32 字数 416 浏览 5 评论 0原文

我有这个（简化的）标记：

<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 中测试过）

原文

I have this (simplified) markup:

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

and these CSS rules:

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

#last-nav {
    float: right;
}

To my surprise, the second rule is overruled by the first one. If I change the selector to li#last-nav, it works. Why is that?

(Disclaimer: I only tested this in Firefox)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

他不在意 2024-10-09 01:57:32

级联的工作原理如下：

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

在这里，#topnav li 具有特异性为 101，而 #last-nav 的特异性为 100，因此第一个获胜。 li#last-nav 或 #topnav #last-nav 选择器会更具体。

回复收藏 0 原文

疾风者 2024-10-09 01:57:32

阅读 CSS 特异性：

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

本质上，第一个选择器比第二个选择器更具体，因此它优先。这与 CSS 中自上而下的顺序无关。仅当两个选择器同样具体时才适用自上而下的顺序。

回复收藏 0 原文

情话难免假 2024-10-09 01:57:32

选择器规则：计算特异性

样式表还可以根据其特异性级别覆盖冲突的样式表，其中更具体的样式总是会胜过不太具体的样式。这只是一个计算选择器特异性的计数游戏。

计算选择器中 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/struct.html

Selector Rules: Calculating Specificity

Style sheets can also override conflicting style sheets based on their level of specificity, where a more specific style will always win out over a less specific one. It is simply a counting game to calculate the specificity of a selector.

Count the number of ID attributes in the selector.
Count the number of CLASS attributes in the selector.
Count the number of HTML tag names in the selector.

Finally, write the three numbers in exact order with no spaces or commas to obtain a three digit number. (Note, you may need to convert the numbers to a larger base to end up with three digits.) The final list of numbers corresponding to selectors will easily determine specificity with the higher numbers winning out over lower numbers. Following is a list of selectors sorted by specificity:

#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 */

In your example #topnav li is 101 and #last-nav is only 100, so 101 wins.

Cited from http://htmlhelp.com/reference/css/structure.html

回复收藏 0 原文

桃扇骨 2024-10-09 01:57:32

你可以具体地解释一下。

可以这样想：

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 只是更具体

You can explain this with specificity.

Think of it like this:

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

So #topnav li is more specific and thus gains precedence.

Of course cascading and inhertence and even the use of !important can take other effects on the CSS but in this case, #topnav li is just more specific

回复收藏 0 原文

九局 2024-10-09 01:57:32

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

li#last-nav {  }

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

The last rule has a lower specificity. Try changing to:

li#last-nav {  }

FYI: You can use this tool calc specificity: Specificity Calculator

回复收藏 0 原文

空名 2024-10-09 01:57:32

使用：

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

或

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

Use:

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

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

回复收藏 0 原文

夜未央樱花落 2024-10-09 01:57:32

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

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

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

#topnav li:last-child {

float: right;
...

并达到与您想要的相同的结果。

HTH，

I'm not sure, though I suspect, that the first rule is taking precedence because it is being applied to a specific element (li, in this case). The second rule could theoretically apply to any element with an ID of last-nav.

Specificity rules may be coming into play: http://www.w3.org/TR/CSS2/cascade.html#specificity

Modern browsers would probably let you get away with:

#topnav li:last-child {

float: right;
}

...and achieve the same outcome to the one you want.

HTH,

回复收藏 0 原文

养猫人 2024-10-09 01:57:32

这与你的第一种风格比第二种风格更具体有关。请访问此网站了解更多详情。为了让你的第二种风格正常工作，请尝试使用：

#topnav #last-nav

It has to do with your first style have more specificity than your second. Check out this site for more details. To get your second style working properly, try using: