如何使用 CSS 获得特定数字的孩子？

Posted 2023-03-06

【中文标题】如何使用 CSS 获得特定数字的孩子？

【英文标题】：How can I get a specific number child using CSS?

【发布时间】：2011-08-05 14:32:30

【问题描述】：

我有一个table，其tds 是动态创建的。我知道如何获得第一个和最后一个孩子，但我的问题是：

有没有办法使用 CSS 获得第二个或第三个孩子？

【参考方案1】：

对于现代浏览器，使用td:nth-child(2) 作为第二个td，使用td:nth-child(3) 作为第三个。请记住，这些会为每一行检索第二个和第三个td。

如果您需要与版本 9 之前的 IE 兼容，请使用兄弟组合符或 javascript as suggested by Tim。另请参阅我对this related question 的回答，了解他的方法的解释和说明。

【讨论】：

不要忘记这仅适用于 CSS 3 选择器（换句话说，不适用于 9 之前的 IE 版本）。

Soon a concern of the past ... My feelings on this.

作为一个通用的解决方案，td:nth-of-type(3) 更好。 td:nth-child(3) 将匹配 both 和 td 和 其父元素的第三个子元素的元素，无论其前两个兄弟元素的元素类型如何。 td:nth-of-type(3) 将获得第三个 td，不管它前面有多少非td 元素。如果在您想要的元素之前没有非td 元素，则两个选择器将匹配相同的东西。

【参考方案2】：

对于 IE 7 和 8（以及其他不支持 CSS3 的浏览器，不包括 IE6），您可以使用以下方法获取第二个和第三个孩子：

第二个孩子：

td:first-child + td

第三个孩子：

td:first-child + td + td

然后，只需为您希望选择的每个其他孩子添加另一个 + td。

如果你想支持IE6也可以！您只需要使用一点 javascript（本例中为 jQuery）：

$(function() 
    $('td:first-child').addClass("firstChild");
    $(".table-class tr").each(function() 
        $(this).find('td:eq(1)').addClass("secondChild");
        $(this).find('td:eq(2)').addClass("thirdChild");
    );
);

然后在您的 css 中，您只需使用这些类选择器进行任何您喜欢的更改：

table td.firstChild  /*stuff here*/ 
table td.secondChild  /*stuff to apply to second td in each row*/ 

【讨论】：

感谢您提供 IE7/8 提示。效果很好。

您可以在我的答案中使用 CSS3 选择器或在您的答案中使用 CSS2 选择器，然后将它们直接放入 jQuery 中，它们将在 IE6 中自然运行。无需跳过所有这些额外的环节来添加类。