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

是否有一种方法获得使用CSS的第二个或第三个孩子?


当前回答

对于ie7和ie8(以及其他不支持CSS3的浏览器,不包括IE6),你可以使用以下方法来获取第2个子节点和第3个子节点:

孩子2:

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和ie8(以及其他不支持CSS3的浏览器,不包括IE6),你可以使用以下方法来获取第2个子节点和第3个子节点:

孩子2:

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

对于现代浏览器,使用td:n -child(2)表示第二个td,使用td:n -child(3)表示第三个td。记住,这些函数为每一行检索第二个和第三个td。

如果你需要兼容版本9以上的IE,可以使用Tim建议的兄弟组合子或JavaScript。也可以看到我对这个相关问题的回答,以了解他的方法的解释和说明。