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

Ответ 1

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

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

Ответ 2

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

2nd Child:

td:first-child + td

3rd Child:

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