css - 我可以将:nth-​​child()或:nth-​​of-type()与任意选择器结合使用吗？

Question

有没有办法选择匹配（或不匹配）任意选择器的第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元素，而不管它们是否属于“ row”类，因此我最终得到一个偶数“ row”元素，而不是我要寻找的两个。 :nth-of-type()也会发生相同的情况。

有人可以解释为什么吗？

Answer 1

这是由于对:nth-child()和:nth-of-type()的工作方式的误解而引起的非常普遍的问题。不幸的是，目前还没有基于选择器的解决方案，因为选择器还没有提供一种方法来匹配基于奇数，偶数或任何an+b其中 和 a != 1。这不仅限于类选择器，还包括属性选择器，取反和简单选择器的更复杂组合。

b != 0 pseudo-class在同一个父对象的所有同胞中计算元素。它不只计算与选择器其余部分匹配的兄弟姐妹。类似地， :nth-child() pseudo-class计算共享相同元素类型的兄弟姐妹，该元素类型引用HTML中的标签名称，而不是选择器的其余部分。

这也意味着，如果同一父级的所有子级都具有相同的元素类型，例如，在表体中唯一的子级是 :nth-of-type()元素或列表元素的唯一子级是 tr元素，则 li和 :nth-child()的行为相同，即，对于 :nth-of-type()的每个值， an+b和 :nth-child(an+b)将匹配同一组元素。

实际上，给定复合选择器中的所有简单选择器，包括 :nth-of-type(an+b)和 :nth-child()之类的伪类，都彼此独立工作，而不是查看与选择器其余部分匹配的元素子集。

这也意味着在每个单独的复合选择器1中的简单选择器之间没有顺序的概念，这意味着例如以下两个选择器是等效的：

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

翻译成英文，它们的意思是：


  选择与以下所有独立条件匹配的任何 :not()元素：
  
  
  它是其父代的奇数子代；
  它具有“行”类；和
  它是具有类“ myClass”的 tr元素的后代。
  


（您会注意到我在这里使用的是无序列表，只是为了将要点指向家）

因为目前还没有纯CSS解决方案，所以您必须使用脚本来过滤元素并相应地应用样式或额外的类名。例如，以下是使用jQuery的常见解决方法（假设表中只有一个行组填充了 table元素）：

$('table.myClass').each(function() {
  // Note that, confusingly, jQuery's filter pseudos are 0-indexed
  // while CSS :nth-child() is 1-indexed
  $('tr.row:even').addClass('odd');
});

使用相应的CSS：

table.myClass tr.row.odd {
  ...
}

如果您使用诸如Selenium之类的自动化测试工具，或者使用诸如lxml之类的工具来处理HTML，则其中许多工具都可以将XPath用作替代方法：

//table[contains(concat(' ', @class, ' '), ' myClass ')]//tr[contains(concat(' ', @class, ' '), ' row ')][position() mod 2)=1]

其他使用不同技术的解决方案留给读者练习；这只是一个简短的，人为的示例。



对于它的价值，有一个建议将 an extension to the tr notation添加到选择器级别4，用于选择与给定选择器匹配的第n个子对象的特定目的。2

再次由于选择器如何按照现有选择器语法规定的顺序彼此独立地操作，因此将筛选器用来匹配的选择器作为 :nth-child()的参数提供。因此，在您的情况下，它看起来像这样：

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

（精明的读者会立即注意到，应该改为 :nth-child()，因为简单选择器 :nth-child(odd of tr.row)和 tr也彼此独立运行。这是接受函数伪类的问题之一。选择器，一罐蠕虫，我不想在这个答案的中间打开，相反，我假设大多数站点除了 :nth-child()元素外不会有其他元素作为同级的兄弟姐妹。表主体，这将使两个选项在功能上都等效。）

当然，作为全新规范中的全新提案，可能要等到几年后才能实现。同时，您必须坚持使用脚本，如上所述。



1如果指定类型或通用选择器，则必须排在最前面。但是，这不会改变选择器的基本工作方式。只是语法上的怪异而已。

2最初被提议为 tr，但是由于它仍然仅相对于其同级而不是与给定选择器匹配的所有其他元素相对计数一个元素，自2014年起，它已被重新用作现有< cc>代替。