具有奇数/偶数错误索引的 CSS 类和 nth-child() 选择

Question

我经常使用 nth-child() ——但现在我对这种行为感到困惑。我有一个包装元素（id=content）和很多子元素（class=el）。当这是包装器中的唯一内容时，一切都很好。当我在“el”对象之前放置一个 div（无类）时，nth-child（奇/偶）的顺序是错误的。

#content {
    background:rgb(200,200,200);
}

.el {
    height:20px;
    background:grey;
    margin-bottom:10px;
}

.el:nth-child(odd) {
    background:green;
}

.el:nth-child(even) {
    background:red;
}

<div id="content">
    <div></div> (or <i>, <span>, ... any element)
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
</div>

我为此设置了一个 JSFiddle 示例：https://jsfiddle.net/5p2uh5e5/1/（第一行应该是绿色的）。如果您在“el”对象之前删除 div，则排序是正确的。即使您在“el”对象之前放置了第二个 any 类型的对象。

我怎样才能通过 CSS 选择奇数/偶数的“el”-Divs？

Answer 1

好吧，我找到了一种解决方案，只需颠倒处理，制作：

.el:nth-child(even) {
    background:green;
}

.el:nth-child(odd) {
    background:red;
} 

这将解决您的问题....

Answer 2

伪类匹配元素而不是类。当您将它与类一起使用时，该类的作用就像一个过滤器。所以以你的 jsFiddle 为例：

<div id="content">
    <div>xxx</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
</div>
#content {
    background:rgb(200, 200, 200);
}
.el {
    height:20px;
    background:grey;
    margin-bottom:10px;
}
.el:nth-child(odd) {
    background:green;
}
.el:nth-child(even) {
    background:red;
}

第一个没有类的 div 是父 div 的第一个具有类内容的子元素，它的索引为 1（因为伪类从 1 开始），这是奇数。您的.el:nth-child(odd) 规则未应用，因为虽然孩子是奇数，但它没有el 类，因此未应用。在这个伪类上添加.el 使它像一个过滤器。

下一个div，类el的第一个是second子，它的索引是二，所以是偶数，应用.el:nth-child(even)选择器，背景是红色.等等等等。

Answer 3

如果您知道第一个 .el 之前的元素数量，则可以通过将 2n+x 写入奇数并将 2n+y 写入偶数来仅定位 .el ，其中 x 是该数字加上 1 和 y是数字加 2。

所以如果你有 2 个元素，你会得到 2n+3 奇数和 2n+4 偶数。

#content {
    background:rgb(200,200,200);
}

.el {
    height:20px;
    background:grey;
    margin-bottom:10px;
}

.el:nth-child(2n+3) { /* the number is the amount of unstyled elements before the first .el plus 1 */
    background:green;
}

.el:nth-child(2n+4) { /* and here, the amount plus 2 */
    background:red;
}

<div id="content">
    <div>nothing</div> <!-- note, two elements inserted -->
    <div>nothing</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
</div>

编辑：如果您不知道插入元素的数量，可能的解决方案是将所有 .el div 放入自己的容器中。

#content {
  background: rgb(200, 200, 200);
}
.el {
  height: 20px;
  background: grey;
  margin-bottom: 10px;
}
/* Note: more specific selector */
#content > div > .el:nth-child(odd) {
  background: green;
}
#content > div > .el:nth-child(even) {
  background: red;
}

<div id="content">
  <div>nothing</div> <!-- note, two elements inserted -->
  <div>nothing</div>
  <div>              <!-- and a new container for the els -->
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
  </div>
</div>

编辑 2：如果不可能，另一种可能性是分别针对每个人 .el。例如，:not(.el) + .el 定位第一个 .el，:not(.el) + .el + .el + .el 定位第三个等等。

这里的限制是你必须事先知道最多有多少个.el元素。在此示例中，它最多可用于 10 个。如果可能有更多，您将不得不使用更多（和更长）的选择器。

#content {
    background:rgb(200,200,200);
}

.el {
    height:20px;
    background:grey;
    margin-bottom:10px;
}

#content .el {
  background:red;
}

#content :not(.el) + .el,
#content :not(.el) + .el + .el + .el,
#content :not(.el) + .el + .el + .el + .el + .el,
#content :not(.el) + .el + .el + .el + .el + .el + .el + .el,
#content :not(.el) + .el + .el + .el + .el + .el + .el + .el + .el + .el
{
    background:green;
}

<div id="content">
    <div>nothing</div> <!-- note, two elements inserted -->
    <div>nothing</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
</div>

另一种解决方案是在末尾开始计数，使用nth-last-child。

这是一个限制，您需要知道.el div 的数量是奇数还是偶数。这个例子假设它是偶数（因为原始代码中有 6 个）；如果是奇数，则必须更改样式。

#content {
    background:rgb(200,200,200);
}

.el {
    height:20px;
    background:grey;
    margin-bottom:10px;
}

.el:nth-last-child(even) {
    background:green;
}

.el:nth-last-child(odd) {
    background:red;
}

<div id="content">
    <div>nothing</div> <!-- note, two elements inserted -->
    <div>nothing</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
</div>

Answer 4

使用纯 CSS 仅使用 nth-child 选择指定的类元素是行不通的，所以我制作了一个小的 jQuery 脚本来为元素添加奇数/偶数类名。在 CSS 中——当然——我已经用类名 .odd/.even 替换了 nth-child(odd/even)。谢谢大家！

$('.el').each(function(index) {
    if ((index + 1) %2 == 1) { $(this).addClass('odd'); }
    else { $(this).addClass('even'); }
});