Seleziona tutto 'tr' tranne il primo

Come posso selezionare tutti gli trelementi tranne il primo trin una tabella con CSS?

Ho provato a utilizzare questo metodo, ma ho scoperto che non funzionava.

Aggiungendo una classe alla prima tro alla successiva tr. Non esiste un modo crossbrowser per selezionare le righe desiderate solo con CSS.

Tuttavia, se non ti interessa Internet Explorer 6, 7 o 8:

tr:not(:first-child) {
    color: red;
}

Sono sorpreso che nessuno abbia menzionato l'uso di combinatori di pari livello, che sono supportati da IE7 e versioni successive:

tr + tr /* CSS2, adjacent sibling */
tr ~ tr /* CSS3, general sibling */

Entrambi funzionano esattamente allo stesso modo (nel contesto delle tabelle HTML) come:

tr:not(:first-child)

soluzione ideale ma non supportata in IE

tr:not(:first-child) {css}

la seconda soluzione sarebbe quella di modellare tutte le tr e quindi sovrascrivere con css per il primo figlio:

tr {css}
tr:first-child {override css above}

sembra che la "prima riga" di cui stai parlando sia l'intestazione della tabella - quindi dovresti davvero pensare di utilizzare theade tbodynel tuo markup ( fai clic qui ) che si tradurrebbe in un markup "migliore" (semanticamente corretto, utile per cose come gli screen reader ) e possibilità più facili da usare su più browser per css-selection ( table thead ... { ... })

Sebbene la domanda abbia già una risposta decente, voglio solo sottolineare che il :first-childtag va sul tipo di elemento che rappresenta i bambini.

Ad esempio, nel codice:

<div id"someDiv">
     <input id="someInput1" /> 
     <input id="someInput2" />
     <input id="someInput2" />
</div

Se vuoi influenzare solo i secondi due elementi con un margine, ma non il primo, dovresti:

#someDiv > input {
     margin-top: 20px;
}
#someDiv > input:first-child{
     margin-top: 0px;
}

cioè, poiché gli inputs sono i figli, si posizionerebbe first-childsulla porzione di input del selettore.

Mi dispiace, so che questo è vecchio, ma perché non modellare tutti gli elementi tr nel modo desiderato tutti tranne il primo e usare la classe psuedo: first-child dove revochi ciò che hai specificato per tutti gli elementi tr.

Meglio descritto da questo esempio:

http://jsfiddle.net/DWTr7/1/

tr {
    border-top: 1px solid;
}
tr:first-child {
    border-top: none;   
}

/ Patrik

Poiché tr:not(:first-child)non è supportato da IE 6, 7, 8. È possibile utilizzare l'aiuto di jQuery. Puoi trovarlo qui

Un'altra opzione:

tr:nth-child(n + 2) {
    /* properties */
}

Potrebbe essere qualcuno che può beneficiare, di seguito è quello che ho usato

ol li:not(:first-child) {
    background: black;
    color: white;
}

Puoi anche usare un selettore di pseudo-classe nel tuo CSS in questo modo:

.desc:not(:first-child) {
    display: none;
}

Ciò non applicherà la classe al primo elemento con la classe .desc.

Ecco un JSFiddle con un esempio: http://jsfiddle.net/YYTFT/ , e questa è una buona fonte per spiegare i selettori di pseudo-classi: http://css-tricks.com/pseudo-class-selectors/

È possibile creare una classe e utilizzare la classe quando si definisce tutto il futuro che si desidera (o non si desidera) essere selezionato dal CSS.

Questo sarebbe fatto scrivendo

<tr class="unselected">

e poi nel tuo CSS con le linee (e usando il comando text-align come esempio):

unselected {
  text-align:center;
}



selected {
  text-align:right;
}