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

262

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

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

Теги:
css-selectors

2 ответа

354
Лучший ответ

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

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

  • 19
    Не забывайте, что это работает только с селекторами CSS 3 (другими словами, не в версиях IE до 9).
Показать ещё 1 комментарий
210

Для 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*/ }
  • 19
    Спасибо за совет IE7 / 8. Работает отлично.
  • 2
    Вы можете взять селекторы CSS3 в моем ответе или селекторы CSS2 в своем и поместить их прямо в jQuery, и они будут естественным образом работать в IE6. Не нужно прыгать через все эти дополнительные обручи, чтобы добавить классы.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню