css - 令人困惑的 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 有一个 specificity为 101，而 #last-nav 的特异性为 100，因此第一个获胜。 li#last-nav 或 #topnav #last-nav 的选择器会更具体。