Wie kann ich alle tr
Elemente außer dem ersten tr
in einer Tabelle mit CSS auswählen ?
Ich habe versucht, diese Methode zu verwenden, aber festgestellt, dass sie nicht funktioniert hat.
css
css-selectors
Alexander Abakumov
quelle
quelle
<tr>
und eine andere Klasse für den Rest von ihnen.Antworten:
Durch Hinzufügen einer Klasse entweder zum ersten
tr
oder zum nachfolgendentr
s. 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:
quelle
tr:not(:first-of-type)
eine mögliche Lösung hinweisen , wenn Sie eher nach der ersten Instanz eines bestimmten Selektors als nach dem ersten verallgemeinerten Kind suchen.Ich bin überrascht, dass niemand die Verwendung von Geschwisterkombinatoren erwähnt hat, die von IE7 und höher unterstützt werden:
Beide funktionieren genauso (sowieso im Kontext von HTML-Tabellen) wie:
quelle
elem + elem
ist eine großartige allgemeine Lösung, wenn die Elemente, auf die Sie abzielen möchten, nicht die einzigen untergeordneten Elemente sind. Wenn auf a beispielsweise<h2>
mehrere<p>
Tags folgen ,<p>
ist das erste in diesem Fall nicht das erste Kind.ideale Lösung, aber im IE nicht unterstützt
Die zweite Lösung wäre, alle trs zu formatieren und dann mit css für das erste Kind zu überschreiben:
quelle
Klingt so, als wäre die 'erste Zeile', von der Sie sprechen, Ihre Tabellenüberschrift. Sie sollten also wirklich daran denken,
thead
undtbody
in 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 ... { ... }
)quelle
Obwohl die Frage bereits eine anständige Antwort hat, möchte ich nur betonen, dass das
:first-child
Tag den Elementtyp betrifft, der die Kinder darstellt.Zum Beispiel im Code:
Wenn Sie nur die zweiten beiden Elemente mit einem Rand beeinflussen möchten, nicht jedoch das erste, würden Sie Folgendes tun:
Das heißt, da die
input
s die untergeordneten Elemente sind, würden Sie siefirst-child
auf dem Eingabeabschnitt des Selektors platzieren.quelle
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/
/ Patrik
quelle
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 findenquelle
Andere Option:
quelle
Vielleicht kann jemand davon profitieren, unten ist das, was ich verwendet habe
quelle
Sie können in Ihrem CSS auch einen Pseudoklassen-Selektor wie folgt verwenden:
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/
quelle
first-child
ignoriert Klassen.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
und dann in Ihrem CSS mit den Zeilen (und mit dem Befehl text-align als Beispiel):
quelle