Odpowiedzi:
W przypadku nowoczesnych przeglądarek użyj td:nth-child(2)dla drugiego tdi td:nth-child(3)trzeciego. Pamiętaj, że pobierają one drugi i trzeci td dla każdego wiersza .
Jeśli potrzebujesz zgodności z IE starszą niż wersja 9, użyj kombinacji rodzeństwa lub JavaScript, jak sugeruje Tim . Zobacz także moją odpowiedź na to pokrewne pytanie, aby uzyskać wyjaśnienie i ilustrację jego metody.
td:nth-of-type(3)jest lepsze. td:nth-child(3)dopasuje element, który jest zarówno td i trzecim dzieckiem swojego rodzica, niezależnie od rodzaju elementem jej dwóch poprzednich rodzeństwa . td:nth-of-type(3)dostanie trzeci td, bez względu na to, ile tdelementów przed nim jest . Jeśli tdprzed tym, którego chcesz, nie ma żadnych elementów, oba selektory będą pasować do tego samego.
W przeglądarkach IE 7 i 8 (i innych przeglądarkach bez obsługi CSS3 bez IE6) możesz użyć następujących elementów, aby uzyskać 2. i 3. dziecko:
2. dziecko:
td:first-child + td3. dziecko:
td:first-child + td + tdNastępnie po prostu dodaj kolejne + tddla każdego dodatkowego dziecka, które chcesz wybrać.
Jeśli chcesz wesprzeć IE6, możesz to zrobić! Musisz po prostu użyć małego javascript (w tym przykładzie 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");
});
});Następnie w swoim css po prostu użyj tych selektorów klas, aby wprowadzić dowolne zmiany:
table td.firstChild { /*stuff here*/ }
table td.secondChild { /*stuff to apply to second td in each row*/ }