是否可以将 :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”类，所以我最终得到了一个 even “行”元素而不是我正在寻找的两个元素。 :nth-of-type() 也会发生同样的情况。

谁能解释一下为什么吗？

Answer 1

不是真的..

引用自文档

它是它自己的选择器，不与类结合。在您的规则中，它只需同时满足两个选择器，因此如果 :nth-child(even) 表行也恰好具有 .row 类。

Answer 2

这是一个非常常见的问题，由于对 :nth-child(An+B) 和 :nth-of-type() 工作原理的误解而出现.

在第 3 级选择器中，:nth-child () 伪类 对同一父级下的所有同级元素进行计数。它不只计算与选择器其余部分匹配的同级。

同样，:nth-of- type() 伪类 计算共享相同元素类型的兄弟元素，该元素类型引用 HTML 中的标签名称，而不是选择器的其余部分。

这也意味着，如果同一父级的所有子级都具有相同的元素类型，例如，表体的唯一子级是 tr 元素，或者列表元素的唯一子级是子元素是 li 元素，那么 :nth-child() 和 :nth-of-type() 将表现相同，即对于每个值An+B、:nth-child(An+B) 和 :nth-of-type(An+B) 将匹配同一组元素。

事实上，给定复合选择器中的所有简单选择器（包括伪类，例如 :nth-child() 和 :not()）都可以工作彼此独立，而不是查看与选择器其余部分匹配的元素子集。

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

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

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

^{（你会注意到我在这里使用了无序列表，只是为了让大家明白这一点）}

选择器级别 4 试图通过允许 来纠正此限制:nth-child(An+B of S)² 接受任意选择器参数 S，同样是由于复合选择器中选择器如何彼此独立地操作，如下所示由现有选择器语法决定。所以在你的情况下，它看起来像这样：

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

当然，作为全新规范中的全新提案，这可能要等到 $('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 等自动化测试工具或使用 BeautifulSoup 等工具抓取 HTML，其中许多工具都允许使用 XPath 作为替代方案：

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

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

---

¹ _{如果您指定类型或通用选择器，它必须排在第一位。然而，这并没有改变选择器的根本工作方式。这只不过是一个语法上的怪癖。}

² _{这最初被提议为 :nth-match()，但是因为它仍然只计算相对于其兄弟元素的元素，而不是相对于每个元素与给定选择器匹配的其他元素，自 2014 年起它已被重新用作现有 :nth-child() 的扩展。}