nth-child(单数)没有按预期工作

Question

为什么我使用时每一行都有红色背景nth-child(odd)？

<div id="ClientTable">
    <div class="ClientTableHeaderRow"><span class="ClientTableHeaderColumn">Full Name</span></div>
    <div class="ClientTableRow"><span class="ClientName">Umpa Beeson</span></div>
    <div class="ClientTableRow"><span class="ClientName">Umpa Beeson</span></div>
    <div class="ClientTableRow"><span class="ClientName">Umpa Beeson</span></div>
    <div class="ClientTableRow"><span class="ClientName">Umpa Beeson</span></div>
</div>?

#ClientTable    {position: relative;
                 display: table;
                 margin-top: 20px;
                 width: 100%;}

#ClientTable:nth-child(odd) {background-color:#FF0000;}                 

.ClientTableHeaderRow, .ClientTableRow {display: table-row; }
.ClientTableHeaderRow {font-weight: bold;}
.ClientTableHeaderRow span, .ClientTableRow span {display: table-cell;}?

查看jsFiddle

预期结果是每隔一行为红色.相反,正如您所看到的,每一行都是红色的.
PS Umpa是我的猫.

Answer 1

您应该设置ClientTableRow类,如下所示:

.ClientTableRow:nth-child(odd) {background-color:#FF0000;}

演示:http://jsfiddle.net/gMR2K/4/

编辑

正如animuson所解释的那样,您需要将:nth-child选择器应用于元素本身,而不是父元素.当实际上样式应用于整个文档中所选元素的第n个子元素时,选择器的名称可以使人们认为它将样式应用于所选元素的子元素.

此外,如果您担心浏览器兼容性,您也可以使用JavaScript执行此操作.这是使用jQuery的一个例子.

$(document).ready()
{
    $(".ClientTableRow:nth-child(odd)").addClass("redBackground");
}

演示:http://jsfiddle.net/gMR2K/10/

如前所述这里的BoltClock:jQuery的":反正旧的浏览器第n个孩子()选择polyfills的."

Answer 2

nth-child适用于实际元素,而不是其子元素.#ClientTable是其父母的第一个(也是唯一的)孩子.因此,它有一个红色背景.您需要将nth-child应用于该分区内的元素.