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

Question

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

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

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

511 2

html css css3 css-selectors

2 ответов:

Comments

Ничего не найдено.

BoltClock · Accepted Answer · 2017-05-23 15:02:43

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

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

Tim · Accepted Answer · 2011-12-15 18:14:36

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