第n个孩子（单数）未按预期工作

为什么每行都有红色背景当我使用nth-child(odd)？第n个孩子（单数）未按预期工作

<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

预期的结果是每隔一行是红色。相反，如你所见，每一行都是红色的。
P.S. Umpa是我的猫。

来源

2012-03-23 Scott Beeson

哇，史诗编辑。谢谢@animuson。我会在下次尝试更详细的。 – 2012-03-23 00:47:15

您应该设置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的 “：反正旧的浏览器第n个孩子（）选择polyfills的。”

来源

2012-03-23 00:36:09

这让我的世界变得毫无意义......但它很有效。：\ – 2012-03-23 00:48:16

看到Animuson的答案，他在解释它时做得很好:) – 2012-03-23 01:15:10

是的，我现在明白了，但它仍然没有任何意义（如果这是有道理的）。 :) – 2012-03-23 14:14:08

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

来源

2012-03-23 00:38:25 animuson

祝贺达到10k代表。享受您最新获得的工具！ – BoltClock 2012-03-23 17:32:32

这只适用于更好的浏览器。 IE 8及以下版本不明白。但是，您可以使用jQuery使其在任何地方都可以工作，或者（痛苦地）为奇数行添加一个类。

来源

2012-03-23 00:39:31

你的第一句话缺失了吗？ – BoltClock 2012-03-23 17:22:54

这是你想要？：

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

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

来源

2012-03-23 00:42:06 adedoy

在我来说，我犯了一个小错误

.someclassA .someclassB结果：第n个孩子（奇）{ 你可以看到，如上所述，某个classB和n-child之间有一个空格。多数民众赞成它..通过删除该空间它开始工作:)

来源

2014-01-05 15:09:35 enRaiser

第n个孩子（单数）未按预期工作

回答

相关问题