Come posso ottenere un numero specifico bambino usando i CSS?

Ho una table cui td s sono creati dynamicmente. So come ottenere il primo e l’ultimo figlio, ma la mia domanda è:

C’è un modo per ottenere il secondo o il terzo bambino usando i CSS?

Per i browser moderni, utilizzare td:nth-child(2) per il secondo td e td:nth-child(3) per il terzo. Ricorda che questi recuperano il secondo e il terzo td per ogni riga .

Se è necessaria la compatibilità con IE precedente alla versione 9, utilizzare i combinatori o JavaScript JavaScript come suggerito da Tim . Vedi anche la mia risposta a questa domanda correlata per una spiegazione e illustrazione del suo metodo.

Per IE 7 e 8 (e altri browser senza supporto per CSS3 che non include IE6) è ansible utilizzare quanto segue per ottenere il 2 ° e 3 ° figlio:

2 ° bambino:

 td:first-child + td 

3 ° figlio:

 td:first-child + td + td 

Quindi aggiungi semplicemente un altro + td per ogni altro bambino che desideri selezionare.

Se vuoi supportare IE6, puoi farlo anche tu! Devi semplicemente usare un piccolo 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 class per fare qualsiasi cambiamento tu voglia:

 table td.firstChild { /*stuff here*/ } table td.secondChild { /*stuff to apply to second td in each row*/ }