如何在DIV行上交替背景颜色？ （Jquery和/或CSS）

Question

我正在为现有HTML输出自定义CSS。所以我无法更改输出，我只能添加脚本（Jquery / Javascript）和自定义CSS。

输出生成行，形成项列表。 这是CSS标识符的结构：

<div>
    <div class="D F">
        <div id=":b" class="G">
        <div id=":c" class="G">
        <div id=":d" class="G">
        <div id=":e" class="G">
        <div id=":f" class="G">
        <div id=":g" class="G">
        <div id=":h" class="G">
    </div>
</div>

div的ID可能会有所不同。在某些情况下，如我的示例中所示，在其他情况下，它包含:1，:2，:3等。或者其他一些数字/字母组合。因此，我不能依靠它来制作CSS声明。

我尝试使用以下脚本，但没有效果（找到并从here修改）：

$('.D>div:odd').css("background-color", "#ff0000");
$('.D>div:even').css("background-color", "#00ff00");

我还尝试了以下CSS（从here找到并修改）：

div.G div:nth-child(even) {background: #CCC;}
div.G div:nth-child(odd) { background: #FFF;}`

但这使得每一行都变灰了。他们没有交替。

我在这里创建了一个小提琴：http://jsfiddle.net/inspirednz/qgb9s8cq/4/

那个包含嵌套在我定位的div中的各种其他div。我把它们放在那个小提琴里，因为由于某些原因（我不清楚）我声明的替代颜色实际上影响了一个div行（div.V）。但不是其他人。

这是另一个小提琴，所有嵌套的div都被取出。在这种情况下，相同的CSS根本没有效果。

http://jsfiddle.net/inspirednz/qgb9s8cq/3/

Answer 1

如果我理解你想要的是什么，那么你想要瞄准你的div而不是div里面的div：

div.G:nth-child(even) {background: #CCC;}
div.G:nth-child(odd) { background: #FFF;}

最好在js上使用css，因为它的硬件加密了。

小提琴http://jsfiddle.net/qgb9s8cq/5/

Answer 2

这是你要找的吗？我对CSS3并不熟悉，但我试了一下。

http://jsfiddle.net/qgb9s8cq/6/

div.G:nth-child(even) {
  background: #CCC;
}

div.G:nth-child(odd) {
  background: #FFF;
}

猜猜我应该在张贴之前刷新......