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”对象之前放置了第二个任何类型的对象。

如何选择带有奇数/偶数的“el”-Divs？

Answer 1

伪类匹配元素而不是类。当您将它与类一起使用时，该类就像一个过滤器。所以拿你的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是第二个子元素，它的索引是2，所以它是偶数，并且应用了.el:nth-child(even)选择器背景是红色的。等等等等。

Answer 2

如果你知道第一个.el之前的元素数量，那么你可以只针对奇数.el和偶数2n+x编写2n+y个元素，其中x是该数字加1，y是数字加2.

因此，如果您有2个元素，则{38}为奇数，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>  <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> div放入他们自己的容器中。

.el

#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;
}

编辑2：如果不可能，另一种可能是分别针对每个人<div id="content"> <div>nothing</div>  <div>nothing</div> <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> </div>。例如，.el定位第一个:not(.el) + .el，.el定位第三个等等。

此处的限制是您必须事先知道最多会有多少:not(.el) + .el + .el + .el个元素。在这个例子中，它最多可以工作10.如果可能有更多，你将不得不使用更多（和更长）的选择器。

.el

#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>  <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 div的数量是奇数还是偶数。这个例子假设它是偶数（因为原始代码中有6个）;如果这是一个奇数，你将不得不改变周围的风格。

.el

#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;
}

Answer 3

使用普通的CSS只能用nth-child选择指定的类元素，所以我制作了一个小的jQuery脚本，用于向元素添加奇/偶类名。在CSS中 - 当然 - 我用类名.odd / .even替换了nth-child（奇数/偶数）。谢谢大家！

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

Answer 4

好吧，我找到了一个解决方案，只需逆转处理，make：

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

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

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

带有奇数/偶数错误索引的CSS类和nth-child（）选择

4 个答案: