it-swarm.com.ru

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

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

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

267
Satch3000

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

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

395
BoltClock

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

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