Как я могу получить второго ребенка с помощью CSS?
У меня есть table, чьи td создаются динамически. Я знаю, как получить первого и последнего ребенка, но мой вопрос:
Есть ли способ получить второго или третьего ребенка с помощью 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 в этом примере):