Antworten:
Verwenden Sie td:nth-child(2)für moderne Browser den zweiten tdund td:nth-child(3)den dritten Browser . Denken Sie daran, dass diese td für jede Zeile die zweite und dritte abrufen .
Wenn Sie Kompatibilität mit IE benötigen, die älter als Version 9 ist, verwenden Sie Geschwisterkombinatoren oder JavaScript, wie von Tim vorgeschlagen . Siehe auch meine Antwort auf diese verwandte Frage für eine Erklärung und Illustration seiner Methode.
td:nth-of-type(3)ist besser. td:nth-child(3)wird mit einem Element übereinstimmen, das sowohl ein td als auch das dritte Kind seines Elternteils ist, unabhängig von den Elementtypen seiner beiden vorherigen Geschwister . td:nth-of-type(3)wird das dritte bekommen td, unabhängig davon, wie viele Nicht- tdElemente davor sind . Wenn tdvor dem gewünschten Element keine Nichtelemente vorhanden sind , stimmen beide Selektoren überein.
Für IE 7 & 8 (und andere Browser ohne CSS3-Unterstützung ohne IE6) können Sie Folgendes verwenden, um das 2. und 3. Kind zu erhalten:
2. Kind:
td:first-child + td3. Kind:
td:first-child + td + tdFügen Sie dann einfach ein weiteres + tdfür jedes weitere Kind hinzu, das Sie auswählen möchten.
Wenn Sie IE6 unterstützen möchten, können Sie dies auch tun! Sie müssen lediglich ein wenig Javascript verwenden (in diesem Beispiel 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");
});
});
Dann verwenden Sie in Ihrem CSS einfach diese Klassenselektoren, um die gewünschten Änderungen vorzunehmen:
table td.firstChild { /*stuff here*/ }
table td.secondChild { /*stuff to apply to second td in each row*/ }