tr: nth-child (even) help. come applicare ad una classe?

Non sono molto bravo con i CSS e ho bisogno di aiuto.tr: nth-child (even) help. come applicare ad una classe?

Ho una tabella in cui voglio che ogni altra riga sia grigia e che le righe alternate siano bianche. ma voglio solo che accada su un particolare tavolo.

ho aggiunto un po 'di codice per il mio CSS:

tr:nth-child(even) { 
background: #CCC; 
} 

tr:nth-child(odd) { 
background: #FFF; 
}

ma il problema è che la sua interessano ogni tavolo sul mio sito. Non ho trovato alcun esempio in cui si applica solo a una determinata classe. È possibile? Voglio che si applicano solo a:

table.dashboardtable

fonte

2009-10-15 user190284

Utilizzare il combinatore CSS discendente (giustapposizione) come al solito:

table.dashboardtable tr:nth-child(even) 
table.dashboardtable tr:nth-child(odd)

fonte

2009-10-15 01:09:59 hobbs

grazie! questo è esattamente ciò di cui avevo bisogno. per qualche ragione stavo mettendo un punto tra dashboardtable e tr. che errore stupido. lol. – user190284

Immagino che potrebbe essere una buona idea usare 'table.dashboardtable> tr: nth-child' (il selettore figlio'> '), in modo che se si hanno tabelle annidate non si applica casualmente a quelle. –

nth-child e nth-of-type accettare odd e even così come una formula come an+b, dove a e b sono costanti.

In genere si desidera utilizzare nth-of-type, che si applica solo al tipo specificato. Questo lascerà fuori altri elementi. Se si desidera che ogni anche tr per avere quel colore di sfondo, quindi provare:

tr:nth-of-type(2n){ 
    background: #CCC; 
} 

tr:nth-of-type(2n+1){ 
    background: #FFF; 
}

More info on CSS Selectors

fonte

2009-10-15 01:12:22 Marius

Ive ha provato solo con ff3, ma strano e persino funziona per me. passare alla formula malamente nel caso in cui ci siano browser che non supportano comunque le parole. Grazie! – user190284

Spero che questo ha un senso di esso.

<!DOCTYPE html> 

<html> 
    <head> 
    <style type="text/css"> 
     #customers tr:nth-child(even){ 
     background-color:white; 
     } 
     #customers tr:nth-child(odd){ 
     background-color:Lavender; 
     } 
    </style> 
    </head> 

    <body> 
    <p>In your markup define your table:</p> 
     <table id="customers"></table> 
    </body> 
</html>

fonte

2012-05-16 22:22:14 Scott

tr: nth-child (even) help. come applicare ad una classe?

risposta

Problemi correlati