Как я могу получить определенное число детей с помощью CSS?

У меня есть tableчьи tdс создаются динамически. Я знаю, как получить первого и последнего ребенка, но мой вопрос:

Есть ли способ получить второго или третьего ребенка с помощью CSS?

Для современных браузеров используйте td:nth-child(2)для второго tdи td:nth-child(3)для третьего. Помните, что они получают второй и третий td для каждой строки .

Если вам нужна совместимость с IE старше версии 9, используйте одноуровневые комбинаторы или JavaScript, как предложено Тимом . Также см. Мой ответ на этот связанный вопрос для объяснения и иллюстрации его метода.

Для IE 7 & 8 (и других браузеров без поддержки CSS3, не включая IE6) вы можете использовать следующее для получения второго и третьего потомков:

2-й ребенок:

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