Wählen Sie alle 'tr' außer dem ersten

Wie kann ich alle trElemente außer dem ersten trin einer Tabelle mit CSS auswählen ?

Ich habe versucht, diese Methode zu verwenden, aber festgestellt, dass sie nicht funktioniert hat.

Durch Hinzufügen einer Klasse entweder zum ersten troder zum nachfolgenden trs. Es gibt keine Crossbrowser-Methode, um die gewünschten Zeilen nur mit CSS auszuwählen.

Wenn Sie sich jedoch nicht für Internet Explorer 6, 7 oder 8 interessieren:

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

Ich bin überrascht, dass niemand die Verwendung von Geschwisterkombinatoren erwähnt hat, die von IE7 und höher unterstützt werden:

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

Beide funktionieren genauso (sowieso im Kontext von HTML-Tabellen) wie:

tr:not(:first-child)

ideale Lösung, aber im IE nicht unterstützt

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

Die zweite Lösung wäre, alle trs zu formatieren und dann mit css für das erste Kind zu überschreiben:

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

Klingt so, als wäre die 'erste Zeile', von der Sie sprechen, Ihre Tabellenüberschrift. Sie sollten also wirklich daran denken, theadund tbodyin Ihrem Markup ( hier klicken ) zu verwenden, was zu einem 'besseren' Markup führen würde (semantisch korrekt, nützlich für Dinge wie Screenreader) ) und einfachere, browserübergreifende Möglichkeiten zur CSS-Auswahl ( table thead ... { ... })

Obwohl die Frage bereits eine anständige Antwort hat, möchte ich nur betonen, dass das :first-childTag den Elementtyp betrifft, der die Kinder darstellt.

Zum Beispiel im Code:

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

Wenn Sie nur die zweiten beiden Elemente mit einem Rand beeinflussen möchten, nicht jedoch das erste, würden Sie Folgendes tun:

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

Das heißt, da die inputs die untergeordneten Elemente sind, würden Sie sie first-childauf dem Eingabeabschnitt des Selektors platzieren.

Es tut mir leid, dass ich weiß, dass dies alt ist, aber warum nicht alle tr-Elemente so stylen, wie Sie es möchten, außer dem ersten, und die Pseudo-Klasse verwenden: first-child, bei der Sie widerrufen, was Sie für alle tr-Elemente angegeben haben.

Besser beschrieben durch dieses Beispiel:

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

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

/ Patrik

Da tr:not(:first-child)wird von IE 6, 7, 8 nicht unterstützt. Sie können die Hilfe von jQuery verwenden. Sie können es hier finden

Andere Option:

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

Vielleicht kann jemand davon profitieren, unten ist das, was ich verwendet habe

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

Sie können in Ihrem CSS auch einen Pseudoklassen-Selektor wie folgt verwenden:

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

Dadurch wird die Klasse nicht auf das erste Element mit der Klasse .desc angewendet.

Hier ist eine JSFiddle mit einem Beispiel: http://jsfiddle.net/YYTFT/ , und dies ist eine gute Quelle, um Pseudoklassenselektoren zu erklären: http://css-tricks.com/pseudo-class-selectors/

Sie können eine Klasse erstellen und die Klasse verwenden, wenn Sie alle Ihre zukünftigen definieren, die vom CSS ausgewählt werden sollen (oder nicht).

Dies würde schriftlich erfolgen

<tr class="unselected">

und dann in Ihrem CSS mit den Zeilen (und mit dem Befehl text-align als Beispiel):

unselected {
  text-align:center;
}



selected {
  text-align:right;
}