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

Question

我有一个table,其tds的动态创建.我知道如何得到第一个和最后一个孩子,但我的问题是:

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

Answer 1

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

如果您需要与早于版本9的IE兼容,请使用Tim建议的兄弟组合器或JavaScript .另请参阅我对这个相关问题的答案,以解释和说明他的方法.

Answer 2

对于IE 7和8(以及其他没有CSS3支持而不包括IE6的浏览器),您可以使用以下内容来获取第2和第3个孩子:

第二个孩子:

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