相关疑难解决方法(0)

有没有办法选择匹配(或不匹配)任意选择器的每个第n个孩子？例如,我想选择每个奇数表行,但是在行的子集中:

table.myClass tr.row:nth-child(odd) {
  ...
}

<table class="myClass">
  <tr>
    <td>Row
  <tr class="row"> <!-- I want this -->
    <td>Row
  <tr class="row">
    <td>Row
  <tr class="row"> <!-- And this -->
    <td>Row
</table>

但:nth-child()似乎只计算所有tr元素,无论它们是否属于"行"类,所以我最终得到一个偶数 "行"元素而不是我正在寻找的两个元素.同样的事情发生在:nth-of-type().

有人可以解释原因吗？

是否有可能让第n个子伪选择器与特定类一起工作？

看到这个例子:http: //jsfiddle.net/fZGvH/

我希望第二个DIV.red转红色,但它不会按预期应用颜色.

不仅如此,当你指定它时,它会将第5个DIV更改为红色:

div.red:nth-child(6)

指定此项时,它会将第8个DIV更改为红色:

div.red:nth-child(9)

这似乎是落后的一个DIV.示例中只有8个DIV标记,因此我不知道为什么nth-child(9)甚至可以正常工作.使用Firefox 3.6进行测试,但在我的实际生产代码中,Chrome中出现同样的问题.我不理解这应该如何工作,希望澄清.

此外,这会将第6个DIV更改为红色,但我真正想要的是将第二个DIV.red更改为红色:

div.red:nth-of-type(6)

我不明白为什么nth-child()和nth-of-type()的响应不同,因为文档中只有八个相同类型的标签.