Відповіді:
Для сучасних браузерів використовуйте td:nth-child(2)для другого td, а td:nth-child(3)для третього. Пам'ятайте, що вони отримують другий і третій td для кожного ряду .
Якщо вам потрібна сумісність з IE, старшою за версію 9, використовуйте комбінатори братів і сестер або JavaScript, як запропонував Тім . Також дивіться мою відповідь на це пов'язане питання для пояснення та ілюстрації його методу.
td:nth-of-type(3)краще. td:nth-child(3)буде відповідати елементу, який є і a, td і третім дочкою свого батька, незалежно від типів елементів двох попередніх побратимів . td:nth-of-type(3)отримає третє td, незалежно від того, скільки неелементів tdдо цього . Якщо tdперед тим, що потрібно, немає неелементів, обидва селектори будуть відповідати одному і тому ж.
Для IE 7 і 8 (та інших браузерів, які не підтримують CSS3, не включаючи IE6), ви можете використовувати наступні для отримання 2-го та 3-го дітей:
2-а дитина:
td:first-child + td3-я дитина:
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*/ }