Question

我正在尝试使用nth-child(odd)为div添加替代行颜色。

我需要为具有类名alternative_cls的div添加替代颜色，但不要添加具有不同类名的div。

但问题是它没有跳过具有不同类名的div，替代颜色正在应用，包括名为div的不同类。

以下是CODE FIDDLE

我想要的是

enter image description here

Answer 1

这里你去http://jsfiddle.net/Dfy59/6/

<强>解释

definition css n-th:child选择器

匹配其父元素的第n个子元素，无论其类型如何。

所以让我们以你的代码为例（并首先删除no_bg节点）：

.alternative_cls:nth-child(odd){
    background:#ccc;
}

的应用如下：

<div class="alternative_cls"> <!-- alternative_cls(n)=1, odd so apply = (grey) -->
    ssf
</div>
<div class="alternative_cls"> <!-- alternative_cls(n)=2, even so don't apply = (transparent) -->
    ssf
</div>
<div class="alternative_cls"> <!-- alternative_cls(n)=3, odd so apply = (grey)-->
    ssf
</div>
<div class="alternative_cls"> <!-- alternative_cls(n)=4, even so don't apply = (transparent) -->
    ssf
</div>
..
etc

当你插入一个具有不同类的div时会发生混淆，当发生这种情况时，css仍将入侵者div计为.alternative_cls的兄弟，但是不会将css应用于它：

<div class="alternative_cls">  <!-- alternative_cls(n)=1, odd so apply = (grey) -->
    ssf
</div>
<div class="no_bg">  <!--alternative_cls(n)=2, but don't apply alternative_cls, just apply no_bg = (pink) -->
    ssf
</div>
<div class="alternative_cls">  <!-- n=3, odd so apply = (grey) NOTE: you'd expect the nth-child selector to skip the last node.. but it didn't, which caused the confusion -->
    ssf
</div>
<div class="alternative_cls"> <!-- n=2, even so don't apply = (transparent) -->
    ssf
</div>
<div class="alternative_cls">  <!-- n=3, odd so apply = (grey)-->
    ssf
</div>
<div class="alternative_cls">  <!-- n=4, even so don't apply = (transparent) -->
    ssf
</div>

我知道这一点的方式是查看我的chrome dev工具并使用jquery选择器：

$('.alternative_cls:nth-child(1)')

返回

[<div class="alternative_cls">
    ssf
</div>]

但是（，这是违反直觉的部分）

$('.alternative_cls:nth-child(2)')

返回

[]

你希望这个选择器在no_bg div之后立即返回节点.. 但它没有！

继续..

 $('.alternative_cls:nth-child(3)')

返回

[<div class="alternative_cls">
    ssf
</div>]

（我建议你亲自试试这个概念）

所以要解决这个问题，你只需将css设置为

即可

.alternative_cls{
    width:100%;
    height:60px
}
.alternative_cls:nth-child(1), .alternative_cls:nth-child(even){
    background:#ccc;
}
.no_bg{
     width:100%;
    height:60px;
    background:#f8d6d6
}

发生这种情况

<div class="alternative_cls">  <!-- n=1, apply the nth-child(1) rule = (grey) -->
    ssf
</div>
<div class="no_bg">   <!--alternative_cls(n)=2, but don't apply alternative_cls, just apply no_bg = (pink) -->
    ssf
</div>
<div class="alternative_cls">  <!-- n=3, odd, so don't apply any rule = (transparent)-->
    ssf
</div>
<div class="alternative_cls"> <!-- n=2, even so apply the nth-child(even) rule = (grey) -->
    ssf
</div>
<div class="alternative_cls">  <!-- n=3, odd, so don't apply any rule = (transparent)-->
    ssf
</div>
<div class="alternative_cls">  <!-- n=4, even so apply the nth-child(even) rule = (grey) -->
    ssf
</div>

我希望这说清楚..所以有了这些知识，你可以继续使用nth-child选择器，你只需要考虑到这个特点

Answer 2

这是否适用于您需要的产品？：

.alternative_cls:first-child,
.alternative_cls:nth-child(2n){
  background:#ccc;
}

jsFiddle

Answer 3

我已将.no_bg div移动到.alternative_cls中，但是它工作正常。

<div class="alternative_cls">
    ssf
    <div class="no_bg">
    ssf
</div>
</div>
<div class="alternative_cls">
    ssf
</div>
<div class="alternative_cls">
    ssf
</div>
<div class="alternative_cls">
    ssf
</div>
<div class="alternative_cls">
    ssf
</div>

<强> DEMO

Answer 4

正如在别人的答案中所说的那样，nth-child选择器对孩子进行计数，这就是全部;你可以做任何改变。正如已经说过的那样，您可以使用导致第一级孩子之外的问题的div。

如果这是一个问题，另一种方法是将该元素更改为另一种不是 div 的类型。然后，您可以使用仅计算div的 div：nth-of-type（偶数）。

另一种方式，你需要以某种方式改变你的DOM。

替代行颜色到css中的div

4 个答案: