jquery - 如何改变 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;}`

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

我在这里创建了一个 fiddle :http://jsfiddle.net/inspirednz/qgb9s8cq/4/

该 div 包含嵌套在我定位的 div 中的各种其他 div。我把它们留在了那个 fiddle 中，因为由于某种原因(我不清楚)我声明的替代颜色实际上影响了 div 行之一(div.V)。但其他人则不然。

这是另一个 fiddle ，所有嵌套的 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 更好，因为它是硬件加速的。

fiddle http://jsfiddle.net/qgb9s8cq/5/