如何在一个表中调用两个第 n 个孩子？答案

【问题标题】：How to call two nth-child in a table?如何在一个表中调用两个第 n 个孩子？
【发布时间】：2013-11-23 17:51:53
【问题描述】：

我有一个 4*5 的表（4 列，5 行）。

我想在第一列和第二行之后的单元格中添加一个类。

我的代码：

$("tr>td:nth-child(1) tr:nth-child(n+3)").addClass("ClassName");

这不起作用。关于如何做到这一点的任何想法？

附言。 JsFiddle

【问题讨论】：

【解决方案1】：

要选择在第一列和第二行之后都的单元格，请使用 CSS 选择器：

tr:nth-child(n+3) td:nth-child(1)

jQuery:

$("tr:nth-child(n+3) td:nth-child(1)").addClass("ClassName");

【讨论】：

完美！这就是我想做的。现在，您知道为什么必须先指定行 (tr) 再指定列 (td) 吗？
是的。因为您首先必须选择父项，然后是子项。例如，选择器$('aa bb') 表示每个bb 是aa 的子级。如果您选择$('td:something tr:something-else') 之类的内容，在您的示例中，将不会有任何结果，因为没有tr 是td 的子项。
另一方面，当您使用：$("tr:nth-child(n+3) td:nth-child(1)") 时，您会说：首先从第三个开始给我获取行 (trs)。现在，给我他们属于第一列的孩子 (td)。
这很有意义@acdcjunior ！我不知道是否适合在这个线程上问第二个问题......但现在我有第二个问题：与以前相同的实例，将类添加到第一列和第二行之后，但现在我想添加一个类到最后一行。为什么不覆盖最后一行的值？请参阅：jsfiddle.net/japeljoff/CnUw6/2
您将highlight 类添加到td，并将highlight2 类添加到tr。由于td 比tr“更具体”，它的风格将占上风。将选择器更改为tr:nth-child(n+5) td，它将选择（并添加类）到tds 而不是tr。这样，由于类的顺序，highlight2 将是有效的：jsfiddle.net/CnUw6/5（注意类的声明事项的顺序：jsfiddle.net/CnUw6/4）

【解决方案2】：

元素之间需要一个逗号：

$("tr > td:nth-child(1), tr:nth-child(n+3)").addClass("ClassName");

【讨论】：