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

Question

例如，假设我有这个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作为最后一个选择器？

Answer 1

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

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

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

1. 内联样式优于非内联样式。
2. 在其规范中具有更多ID的样式胜过少量的样式。
3. 在其规范中具有更多类/属性的样式击败了具有更少的样式。
4. 在其规范中包含更多标签的样式比较少的样式胜出。
5. 在其他条件相同的情况下，规范中稍后出现的规则胜过早先的规则。

Answer 2

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

Answer 3

Scince你问：“为什么我不能只使用#my_item用于最后一个选择器？”你得到了专家的答案（关于特异性），但你也可以按照以下方式做到这一点

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

DEMO