Question

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

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

Answer 1

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

如果您需要与早于版本9的IE兼容，请使用兄弟组合器或JavaScript as suggested by Tim。另请参阅我对this related question的回答，以获得对其方法的解释和说明。

Answer 2

对于IE 7＆amp; 8（以及其他没有CSS3支持的浏览器，不包括IE6）你可以使用以下内容来获得第二和第三个孩子：

第二个孩子：

td:first-child + td

第3个孩子：

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*/ }

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

2 个答案: