css中div的替代行颜色答案

【问题标题】：Alternative row color to div in csscss中div的替代行颜色
【发布时间】：2013-02-14 05:41:27
【问题描述】：

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

我需要为类名 alternative_cls 的 div 添加替代颜色，而不是类名不同的 div。

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

这里是CODE FIDDLE

我想要的是

【问题讨论】：

@PerfectDark 更新了问题。我想要如图所示的输出
嗨，我更新了你的小提琴here
@jhunlio 这不是我想要的。我需要给出单个类名。简而言之，替代颜色应仅适用于 .alternative_cls div，不应考虑 .no_bg div。
nth-child 选择器匹配其父级的第 n 个子级，无论其元素类型或任何关联类如何。
以下解决方案都不适合您？

标签： html css css-selectors pseudo-class

【解决方案1】：

这能满足你的需要吗？：

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

jsFiddle

【讨论】：

【解决方案2】：

给你http://jsfiddle.net/Dfy59/6/

解释：

by 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 开发工具并使用 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>

我希望这可以说清楚.. 所以有了这些知识，你可以继续使用第 n 个子选择器，你只需要考虑这个特性

【讨论】：

它变得复杂 :) 无论如何，您的答案给出了以另一种方式实现它的想法。感谢您的努力。
no probs man..顺便说一句，请与我们分享您的最终解决方案..我很好奇..我什至可以投票;)
我已经添加了一个答案。查一下
并不是那么复杂。如果一个元素不是其父元素的偶数子元素，则它不是:nth-child(even)。而已。它有或没有什么类都没有关系。
感谢@BoltClock 的认可。我认为我的答案是正确的：p

【解决方案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

【讨论】：

【解决方案4】：

正如其他答案中已经说过的那样，第 n 个子选择器会计算子代数，仅此而已；你可以做任何事情来改变它。如前所述，您可以将导致问题的 div 放在第一级子级之外。

如果这是一个问题，另一种方法是将该元素更改为另一种不是 div 的类型。然后，您可以使用只计算 div 的 div:nth-of-type(even)。

另一种方式，您需要以某种方式更改您的 DOM。

【讨论】：