CSS：nth-​​of-type选择器在非匹配的子节点上中断

Question

我遇到CSS问题：nth-​​of-type选择器。在我的代码中，我有一个DIV列表（类“item”），它应该具有交替的背景颜色（例如红色和绿色）。在这些项目之间可以有一些其他项目（类“noitem”），不与背景颜色匹配。

现在的问题是：nth-​​of-type规则会破坏每个非匹配元素。这导致你有另一个红色项目...

示例HTML代码：

<div class="row">
  <div class="item"><h2>Item</h2></div>
  <div class="item"><h2>Item</h2></div>
  <div class="noitem"><h2>No Item</h2></div>
  <div class="item"><h2>Item</h2></div>
  <div class="item"><h2>Item</h2></div>
  <div class="item"><h2>Item</h2></div>
  <div class="item"><h2>Item</h2></div>
  <div class="noitem"><h2>No Item</h2></div>
  <div class="item"><h2>Item</h2></div>
  <div class="item"><h2>Item</h2></div>
</div>

CSS：

h2{
  font-size: 14px;
  margin: 0 0 10px 0;
  padding: 0;
}

.row .item:nth-of-type(even) h2{
  background-color: red;
}

.row .item:nth-of-type(odd) h2{
  background-color: green;
}

有人可以帮忙吗？可以在此处找到运行示例：http://jsfiddle.net/5qnjshg7/

Answer 1

nth-of-type中的类型是指元素的类型（标记名称，例如div）。它确实不意味着“nth-of-something-with-the-same-classes”，或者“n-of-the-selector-I-specified”，这在CSS中不存在。

换句话说，.item:nth-of-type(even) 不表示“具有类.item的所有子元素列表中的偶数条目”，而是“元素”类.item，它也在该类型的所有子元素列表中的偶数位置（在这种情况下为div），不论其类别或其他任何内容“。

如果你坚持使用现有的HTML

，一种可能的方法

如果你可以生成不同的HTML，包括例如新类，或用div替换noitem元素上的span，如同一个答案所示，那么这是最好的解决方案。如果您无法做或不想这样做，并且出于某种原因需要使用现有的HTML，那么这一点JS将完成这项工作：

var elts = document.querySelectorAll('div.item');
for (var i = 0; i < elts.length; i++) {
    elts[i].classList.add(i % 2 ? 'red' : 'green');
}

Answer 2

nth-of-type将元素与其父元素匹配，因此虽然它不是相同的选择器，但它实际上是与其父元素相关的正确索引。

Answer 3

使用CSS似乎不可能，除非您可以更改标记并制作noitem元素<span>？

<div class="row">
    <div class="item"><h2>Item</h2></div>
    <div class="item"><h2>Item</h2></div>
    <span class="noitem"><h2>No Item</h2></span>
    <div class="item"><h2>Item</h2></div>
    <div class="item"><h2>Item</h2></div>
    <div class="item"><h2>Item</h2></div>
    <div class="item"><h2>Item</h2></div>
    <span class="noitem"><h2>No Item</h2></span>
    <div class="item"><h2>Item</h2></div>
    <div class="item"><h2>Item</h2></div>
</div>