为什么我必须在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的样式比具有更少的样式更胜一筹.
3. 在其规范中具有更多类/属性的样式击败具有更少的样式.
4. 在其规范中具有更多标签的样式比较少的样式.
5. 在所有其他条件相同的情况下,规范中稍后出现的规则会超过之前的规则.