css - 为什么我必须在我的 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 使用一个称为特异性的概念来确定哪些规则适用于哪些元素。

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

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

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

Answer 2

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

Answer 3

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

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

演示。