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;}

View the jsFiddle

预期结果是每隔一行为红色。相反，正如您所看到的，每一行都是红色的附： 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所述here：jQuery“无论如何都为旧浏览器填充了：nth-child（）选择器。”

Answer 2

nth-child适用于实际元素，而不适用于其子元素。 #ClientTable是其父级的第一个（也是唯一的）子级。因此，它有一个红色背景。您需要将nth-child应用于该分区内的元素。

Answer 3

这是你想要的结果吗？：

http://jsfiddle.net/gMR2K/6/

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

Answer 4

并且只适用于更好的浏览器。 IE 8及以下版本没有得到它。但是，您可以使用jQuery使其在任何地方工作或（痛苦地）将类添加到奇数行。

Answer 5

就我而言，我犯了一个小错误

.someclassA .someclassB：nth-child（odd）{ 你可以看到如上所述someclassB：和nth-child之间有一个空格。这就是它。通过删除它开始工作的空间：）

nth-child（单数）没有按预期工作

5 个答案: