为什么 .class_name:nth-child(even) 计算没有 .class_name 的元素

Question

用什么计算的规则:nth-child()？这只是一个错误吗？

.info_row:nth-child(even) {
  background: orange
}

<div>
  <h2>Title</h2>
  <div class="info_row">
    <div>Category:</div>
    <div>data</div>
  </div>
</div>

如果我用div.info_rowother换行<div>或删除<h2>它很明显，那.info_row:nth-child(even)是在<h2>没有.info_row类的情况下计算的。

Answer 1

您正在使用:nth-child()选择器，而您应该使用:nth-of-type()选择器：

.info_row:nth-of-type(even) {
  background: orange
}

<div>
  <h2>Title</h2>
  <div class="info_row">
    <div>Category:</div>
    <div>data</div>
  </div>
  <div class="info_row">
    <div>Category 2:</div>
    <div>data</div>
  </div>
</div>

解释

所述:nth-of-type()选择器选择一个父元素的第n子对应于所述特定类型的（即，div标记）。另一方面，:nth-child()选择器选择父元素的第 n 个子元素，而不考虑 type，因此也计算h2元素。