如何在 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 声明的东西。

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

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

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

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

但这使每个 div 行变灰。他们没有交替。

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

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

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

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

Answer 1

如果我正确理解你想要什么，那么你想要定位你的 div 不是它们里面的 div：

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

使用 css 而不是 js 总是更可取，因为它是硬件加速的。

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