为什么我的第二个 :nth-child 选择器优先？

Question

我有一个关于:nth-child()css的问题。

当我有这样的 HTML 结构时：

<div class="parent">
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
</div>

我的 CSS 看起来像这样：

div.parent div.child:nth-child(3n) {
  background-color: yellow;
}

div.parent div.child:nth-child(2n) {
  background-color: white;
}

似乎第二条（最后一条）指令正在获胜。在每个环境中都是这样吗？

这是一个包含此示例的JSFiddle，其中 CSS 部分切换了两次。

Answer 1

你必须记住 CSS 样式总是会级联的（除非标记为 !important）。

所以，你有每个第三个孩子和每个第二个孩子，但是当它们等于同一个孩子 (6, 12) 依此类推时，LAST 样式将始终是应用的样式。

您可以在任何浏览器上获得此结果。

更多阅读：http : //www.htmlhelp.com/reference/css/structure.html#cascade