Risposte:
Per i browser moderni, utilizzare td:nth-child(2)per il secondo tde td:nth-child(3)per il terzo. Ricorda che questi recuperano il secondo e il terzo td per ogni riga .
Se hai bisogno di compatibilità con IE precedente alla versione 9, usa combinatori di pari livello o JavaScript come suggerito da Tim . Vedi anche la mia risposta a questa domanda correlata per una spiegazione e illustrazione del suo metodo.
td:nth-of-type(3)è meglio. td:nth-child(3)corrisponderà a un elemento che è sia a td che il terzo figlio del suo genitore, indipendentemente dai tipi di elemento dei suoi due fratelli precedenti . td:nth-of-type(3)otterrà il terzo td, indipendentemente da quanti non tdelementi ci siano prima . Se non ci sono non tdelementi prima di quello desiderato, entrambi i selettori corrisponderanno alla stessa cosa.
Per IE 7 e 8 (e altri browser senza supporto CSS3 escluso IE6) è possibile utilizzare quanto segue per ottenere il 2o e 3o figlio:
2 ° bambino:
td:first-child + td3 ° bambino:
td:first-child + td + tdQuindi aggiungine semplicemente un altro + tdper ogni bambino aggiuntivo che desideri selezionare.
Se vuoi supportare IE6 anche questo può essere fatto! Devi semplicemente usare un po 'di javascript (jQuery in questo esempio):
$(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");
});
});Quindi nel tuo css usi semplicemente quei selettori di classe per apportare qualsiasi modifica ti piaccia:
table td.firstChild { /*stuff here*/ }
table td.secondChild { /*stuff to apply to second td in each row*/ }