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


270

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

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

Ответы:


398

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

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


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


2
Как общее решение, td:nth-of-type(3)лучше. td:nth-child(3)будет соответствовать элементу , который является одновременно td и третьим ребенком своих родителей, независимо от типов элементов из двух своих предыдущих братьев и сестер . td:nth-of-type(3)получит третий td, независимо от того, сколько не tdэлементов перед ним . Если tdперед желаемым элементом нет неэлементов , оба селектора будут совпадать.
CJ Деннис

232

Для 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*/ }

19
Спасибо за совет IE7 / 8. Прекрасно работает.
Брендон Кроуфорд

2
Вы можете взять селекторы CSS3 в моем ответе или селекторы CSS2 в своем и поместить их прямо в jQuery, и они будут естественным образом работать в IE6. Не нужно прыгать через все эти дополнительные обручи, чтобы добавить классы.
BoltClock
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.