为什么我必须在我的 CSS 选择器中指定父 ID 才能重新定义边距？答案

【问题标题】：Why must I specify the parent id in my CSS selector in order to redefine a margin?为什么我必须在我的 CSS 选择器中指定父 ID 才能重新定义边距？
【发布时间】：2012-08-12 07:15:47
【问题描述】：

例如，假设我有这个 HTML：

<ul id="nav">
  <li>one</li>
  <li id="my_item">two</li>
  <li>three</li>
  <li>four</li>
</ul>

然后是 CSS：

#nav li {
  margin-bottom:10px;
}

#nav #my_item {
  margin-bottom:30px;
}

为什么我不能只使用#my_item 作为最后一个选择器？

【问题讨论】：

标签： css css-selectors

【解决方案1】：

因为 CSS 使用一个名为 specificity 的概念来确定哪些规则适用于哪些元素。

1 个 ID + 1 个标签比 1 个 ID 更具体
2 个 ID 比 1 个 ID + 1 个标签更具体

当检查哪个规则优先时，请在此处查看列表并停在第一个适用的规则上：

内联样式优于非内联样式。
在其规范中具有更多 ID 的样式优于具有更少 ID 的样式。
在其规范中具有更多类/属性的样式优于具有更少类/属性的样式。
规范中标签较多的样式胜过标签较少的样式。
在其他条件相同的情况下，规范中较晚出现的规则优于较早出现的规则。

【讨论】：

这是最好的解释。用“点”来解释它的所有其他答案都大错特错。
哇，我受过教育。 Amber 和 BoltClock 是对的：w3.org/TR/css3-selectors/#specificity。另外，刚刚在这里测试过：jsfiddle.net/fPxcS。我正在删除我的答案（尽管 +1）。
试图找出我们这么多人被误导的地方。这是一个可能的罪魁祸首：htmldog.com/guides/cssadvanced/specificity——我多年来一直依赖 HTML-Dog，所以这可能就是我得到它的地方。
注意：stackoverflow.com/questions/2809024/points-in-css-specificity。问题标题明确引用了积分系统，但似乎没有人意识到它的有效性。嗯，那个帖子早在 2010 年 3 月，但我的 w3c 参考日期是 2011 年 11 月。所以我们可以假设这是一个修改后的算法吗？
@Faust：它was the same way in CSS2...

【解决方案2】：

因为specificity：第一条规则的特异性为101，而#my_item 的特异性只有100。使用!important 关键字或（如您所做的那样）增加您选择的选择器的特异性想用。如果两条规则具有相同的特异性，则“最新”的规则获胜。

【讨论】：

【解决方案3】：

因为您问过“为什么我不能只使用 #my_item 作为最后一个选择器？”并且您已经从专家那里得到了答案（关于特异性），但您也可以按照以下方式进行操作

#my_item {
    margin-bottom:30px !important;
}

DEMO.

【讨论】：