CSS-Selektor: Auswahl der Pseudoklasse basierend auf der Position von Elementen im Dokument Subree
Kernpunkte
- css bietet einen Selektor, der als Subindex-Pseudo-Klasse bezeichnet wird, um Elemente basierend auf ihrer Position im Dokument-Subtree abzustimmen. Dazu gehören
:first-child,:last-child,:only-child,:nth-child(),:nth-last-child()und . -
:nth-child():nth-last-child()undoddPseudoklasse sind funktional und können Parameter in Form vonevenSchlüsselwort,An BSchlüsselwort, Ganzzahl oder akzeptieren, wobei a das Stufenintervall und B ist Bias -Verschiebung, n ist eine positive Ganzzahl. -
:only-child<code>:empty Pseudoklasse entspricht dem Element, wenn das Element das einzige Kind eines anderen Elements ist. Die Pseudoklasse kann Elemente ohne Kinderelemente auswählen, nicht einmal Räume. -
:first-of-typeCSS liefert typisierte Subindex-Pseudoklassen, die Elemente basierend auf Indexwerten übereinstimmen, sind jedoch auf Elemente eines bestimmten Typs beschränkt. Dazu gehören:last-of-type,:only-of-type,:nth-of-type(),:nth-last-of-type(), und
- CSS stellt auch Selektoren für übereinstimmende Elemente basierend auf ihrer Position im Dokument -Subtree bereit. Diese werden als Subindex-Pseudoklassen bezeichnet, da sie von der Position oder Reihenfolge des Elements abhängen, nicht von seinem Typ, seinem Attribut oder seiner ID. Insgesamt gibt es fünf:
-
:first-child -
:last-child -
:only-child -
:nth-child() -
:nth-last-child()
:first-child
:last-child
und :first-child
:last-child Wie Sie aus dem Namen erraten haben, können die :first-child und :last-child Pseudoklasse verwendet werden, um Elemente auszuwählen, die die ersten oder letzten untergeordneten Elemente eines Knotens (Element) sind. Wie bei anderen Pseudoklassen haben
bei der Definition durch einfache Selektoren die geringsten Nebenwirkungen.
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body> Schauen wir uns die HTML und CSS unten an:
Sie können sehen, wie es im Bild unten aussieht. 
:first-child
h2 Weil li nicht begrenzt ist, sind das h2 Element und das erste body Element rosa. Schließlich ist li das erste untergeordnete Element von ul, und li ist das erste untergeordnete Element des :last-child Elements. Aber warum sind die verbleibenden ul Elemente grün? Das liegt daran, dass body auch nicht begrenzt ist, *:first-child ist das letzte untergeordnete Element von *:last-child. Wir haben tatsächlich
Wenn wir durch Hinzufügen eines einfachen Selektors :first-child und :last-child qualifizieren, ist dies alles sinnvoller. Beschränken wir die Auswahl auf die Auflistung von Elementen. Ändern Sie :first-child in li:first-child und :last-child in li:last-child. Die folgende Abbildung zeigt die Ergebnisse.
:nth-child() und :nth-last-child()
Es ist schön, die ersten und letzten Kinderelemente des Dokuments auszuwählen. Aber was ist, wenn wir ungerade oder sogar Elemente auswählen wollen? Vielleicht möchten wir das sechste Element im Dokument -Subtree auswählen oder den Stil auf alle drei Elemente anwenden. Hier kommen die Pseudoklassen :nth-child() und :nth-last-child() ins Spiel.
wie :not(), :nth-child() und :nth-last-child() sind auch funktionelle Pseudoklassen. Sie akzeptieren einen Parameter, der:
-
oddSchlüsselwörter -
evenSchlüsselwörter - eine Ganzzahl, wie 2 oder 8 oder Parameter in der Form
-
An B, wobei a das Schrittintervall ist, b der Offset und N die Variable, die eine positive Ganzzahl darstellt.
Der letzte Artikel hat eine gewisse Komplexität. Wir werden es später diskutieren.
Was ist der Unterschied zwischen :nth-child() und :nth-last-child()? Ausgangspunkt: :nth-child() Vorwärts zählen, :nth-last-child() rückwärts zählen. Der CSS -Index verwendet Zählnummern, beginnend mit 1 anstelle von 0.
:nth-child() als auch :nth-last-child() können in abwechselnden Modi verwendet werden. Das Erstellen von Zebra -Muster -Tabellenzeilenfarben ist das perfekte Anwendungsfall. Das folgende CSS liefert einen hellen blau-grauen Hintergrund für gerade zahlreiche Tabellenreihen, und das Ergebnis ist in der folgenden Abbildung zu sehen:
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>
Schalten :nth-child zu :nth-last-child wird dieses Band umkehren, da die Anzahl unten startet, wie unten gezeigt.
Wie kann man einige komplexe Beispiele für komplexere Parameter ausprobieren? Wir beginnen mit dem unten gezeigten Dokument, das 20 Elemente enthält.
Verwenden von :nth-child() und :nth-last-child() können wir einzelne untergeordnete Elemente an einem bestimmten Ort auswählen. Wir können alle untergeordneten Elemente von nach einer bestimmten Position auswählen oder Elemente nach Multiplikatoren mit einem Offset auswählen. Ändern wir die Hintergrundfarbe des sechsten Projekts:
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body> Dies gibt uns die folgenden Ergebnisse.
Grammatik ins Spiel: An B
tr:nth-child(even) {
background: rgba(96, 125, 139, 0.1);
} In ähnlicher Weise ist a das Schrittlängenintervall. Es ist fast wie ein Multiplikator von N, beginnend mit 1. Wenn also a = 3, dann stimmt 3n Elemente wie 3, 6, 9 überein. Genau das passiert, wie Sie unten sehen können.
und :nth-child() verwenden, um alle Elemente nach einem Punkt auszuwählen. Versuchen wir, alle Elemente mit Ausnahme der ersten sieben Elemente auszuwählen: :nth-last-child()
.item:nth-child(6) {
background: #e91e63;
} gibt es hier keinen Schrittgrößenwert. Daher entspricht N 8 jedes Element N, das vom achten Element beginnt, wie unten gezeigt.
negative Versatz- und Bereichswerte sind ebenfalls gültig. Die Verwendung von
wird unsere Auswahl umkehren und die ersten acht Elemente übereinstimmen. :nth-child(-n 8)
.item:nth-child(3n) {
background: #e91e63;
} Sie können die Ergebnisse dieses Selektors im folgenden Bild sehen.
:only-child
Wenn das Element ein einzigartiges -Kindes eines anderen Elements ist, dann entspricht die Pseudoklasse mit diesem Element. Unten finden Sie zwei ungeordnete Listen. Der erste hat ein Projekt, während der zweite drei enthält:
:only-child
.item:nth-child(n+8) {
background: #e91e63;
} Apple wird ausgewählt, da es das einzige untergeordnete Element unserer ersten Liste ist. Alle Elemente in der zweiten Liste stimmen jedoch nicht überein, da es drei Geschwisterelemente gibt. Sie können sehen, wie es im Bild unten aussieht.
li:only-child{color: #9c27b0;}
<code>:empty
Sie können auch die <code>:empty Pseudo-Klasse verwenden, um Elemente ohne untergeordnete Elemente auszuwählen. Wenn wir <code>:empty sagen, meinen wir leer . Damit das Element der Pseudoklasse <code>:empty übereinstimmt, kann es nichts anderes enthalten-auch Räume. Mit anderen Worten, <code><p></p> <p> </p> stimmt mit <code>:empty :not() nicht überein. Manchmal fügt der Wysiwyg -Editor ein leeres P -Element in Ihren Inhalt ein. Sie können p:not(:empty) in Kombination mit
Wählen Sie bestimmte Elementetypen nach ihrem Index
aus p:nth-last-child(2)
jedes P -Element aus, das das vorletzte Element seines übergeordneten Elements ist.
In diesem Abschnitt werden wir typisierte Subindex-Pseudoklassen erörtert. Diese Pseudoklassen stimmen auch Elemente an, die auf ihren Indexwerten basieren. Wählen Sie beispielsweise das fünfte P -Element oder das H2 -Element mit einem gleichmäßigen Index aus.
- Es gibt fünf solcher Pseudoklassen mit demselben Namen wie ihr Nicht-Typ-Gegenstück:
-
:first-of-type -
:last-of-type -
:only-of-type -
:nth-of-type() -
:nth-last-of-type()
p:nth-child(5)
p:nth-of-type(5) Der Unterschied zwischen diesen Pseudoklassen und der Subindex-Pseudoklasse ist subtil. Wenn
alle P -Elemente und findet dann das fünfte P -Element unter diesen Elementen.
Beginnen wir mit einem etwas anderen Dokument. Es hat immer noch 20 Gegenstände, aber einige von ihnen sind P -Elemente und einige Divelelemente. Das P -Element hat abgerundete Ecken, wie unten gezeigt. 
:first-of-type
:last-of-type Verwenden Sie :only-type,
und :first-of-type
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body> können wir das erste Element auswählen, das mit dem Selektor übereinstimmt. Wie bieten wir einen kalkgrünen Hintergrund für das erste P -Element:
Dies passt zu jedem P -Element, das das erste P -Element seines übergeordneten Elements ist, wie unten gezeigt. 
:last-of-type
Die Pseudoklasse funktioniert ähnlich, was dem letzten solchen Element ihres übergeordneten Elements entspricht, wie unten gezeigt. Wenn ein Element jedoch ein einzigartiges :only-of-type seines übergeordneten Elements ist, stimmt
Schauen wir uns ein anderes Beispiel mit :first-of-type an, diesmal jedoch mit einem Pseudoelement. Erinnern Sie sich noch an das früher in diesem Kapitel erwähnte ::first-letter Pseudo-Element? Wie Sie sehen können, erstellt es für jedes Element, das es anwendet, einen anfänglichen Kapitalbuchstaben. Gehen wir noch einen Schritt weiter und begrenzen Sie diesen anfänglichen Großbuchstaben auf den ersten Absatz:
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>
Wie im folgenden Bild gezeigt, hat unser Absatz nun einen anfänglichen Großbuchstaben, auch wenn der Titel vorausgeht.
verwenden :nth-of-type und :nth-last-of-type
:nth-of-type() und :nth-last-of-type() sind auch funktionelle Pseudoklassen. Sie akzeptieren die gleichen Parameter wie :nth-child() und :nth-last-child(). Aber wie :first-of-type und :last-of-type löst sich der Index auf denselben Elementtyp auf. Um beispielsweise das erste P -Element und jedes nachfolgende P -Element auszuwählen, können wir das Schlüsselwort odd mit :nth-of-type():
tr:nth-child(even) {
background: rgba(96, 125, 139, 0.1);
}
Wie Sie aus dem Bild unten sehen können, stimmt dies nur mit dem ungeraden nummerierten P -Element überein, nicht mit dem ungeraden nummerierten untergeordneten Element.
Verwenden Sie in ähnlicher Weise :nth-last-of-type(even), um ein gerade nummeriertes P -Element auszuwählen, aber die Anzahl beginnt mit dem letzten P -Element im Dokument - in diesem Fall Element 18 (siehe unten).
Wenn dies immer noch verschwommen aussieht, verwenden Sie Paul Maloneys n-test-Tool oder schauen Sie sich die Beispiele zum N-ten Master an. Beide Projekte sind hervorragende Möglichkeiten, um mehr über diese Pseudoklassen zu erfahren.
[5] Diese An B -Syntax ist in der CSS -Syntaxmodulebene 3 beschrieben.
FAQs über CSS-Pseudoklassen und indexbasierte Elementstile
Was ist eine CSS-Pseudoklasse?
CSS-Pseudoklasse ist ein Schlüsselwort, das dem Selektor hinzugefügt wurde, und wird verwendet, um den speziellen Status des ausgewählten Elements anzugeben. Zum Beispiel kann :hover verwendet werden, um die Farbe einer Schaltfläche zu ändern, wenn der Zeiger des Benutzers darüber schwebt. Eine Pseudoklasse ist zusammen mit Klassen und ID eine Möglichkeit, Stile auf Elemente anzuwenden, ohne HTML-Tags zu ändern.
:nth-child Wie funktionieren Pseudoklassen?
:nth-child Pseudoklasse entspricht Elementen, die auf der Position von Elementen in einer Gruppe gleichzeitiger Elemente basieren. Es verwendet eine funktionsähnliche Syntax :nth-child(an b) wobei "a" und "b" ganzzahlige Werte sind. "N" ist ein Zähler, der bei 0 und in Schritten von 1 für jedes Element beginnt. "A B" bedeutet, dass das Element ausgewählt wird, beginnend mit dem ersten Element (B = 1).
:nth-child und :nth-of-type?
:nth-child entspricht Elementen, die auf der Position eines Elements in allen Geschwisterelementen basieren, während :nth-of-type nur Positionen in Geschwisterelementen desselben Typs berücksichtigt. Wenn es sich beispielsweise um ein Element <code>p:nth-child(2) handelt, wird ein zweites untergeordnetes Element ausgewählt, und <code><p></p> wählt das zweite <code>p:nth-of-type(2) Element und unabhängig von seinen aus Position in anderen Geschwisterelementen. <code><p></p>
Sie können die Pseudoklasse
mit einem Klassenwähler verwenden. Zum Beispiel wählt :nth-child das erste Element mit der Klasse "MyClass" aus. Denken Sie daran, dass dies nur dann funktioniert, wenn das Element das erste Kind seines übergeordneten Elements ist. .myClass:nth-child(1)
verwenden? :nth-child
Nein, negative Werte sind nicht zulässig. Der Mindestwert, den Sie verwenden können, ist 0, wodurch keine Elemente ausgewählt werden. :nth-child
Sie können die Schlüsselwörter "sogar" und "ungerade" mit
verwenden, um jedes gleichmäßige oder ungerade Element auszuwählen. Beispielsweise wählt :nth-child jedes zweite Element aus dem ersten Element aus. :nth-child(even)
mit anderen Pseudoklassen verwenden? :nth-child
Ja, Sie können in Kombination mit anderen Pseudoklassen verwenden. Zum Beispiel wendet :nth-child den Stil an, wenn der Zeiger des Benutzers über das zweite untergeordnete Element schwebt. :nth-child(2):hover
Gibt es einen Leistungsunterschied zwischen
und :nth-child? :nth-of-type
In den meisten Fällen sind die Leistungsunterschiede vernachlässigbar. Im Umgang mit einer großen Anzahl von Elementen ist wahrscheinlich etwas schneller, da es nur Geschwisterelemente desselben Typs betrachtet. :nth-of-type
mit Pseudoelementen verwenden? :nth-child
Nein, Pseudoelemente können nicht mit verwendet werden, da sie nicht als Teil des Dokumentbaums angesehen werden. :nth-child
Gibt es Probleme mit Browserkompatibilität? :nth-child
Alle modernen Browser werden gut unterstützt . Es wird jedoch nicht von Internet Explorer 8 oder früher unterstützt. Für diese Browser müssen Sie möglicherweise JavaScript oder JQuery verwenden, um ähnliche Effekte zu erzielen. :nth-child
Das obige ist der detaillierte Inhalt vonCSS-Pseudoklassen: Styling-Elemente basierend auf ihrem Index. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was ist CSS Grid?Apr 30, 2025 pm 03:21 PMCSS Grid ist ein leistungsstarkes Tool zum Erstellen komplexer, reaktionsschneller Weblayouts. Es vereinfacht das Design, verbessert die Zugänglichkeit und bietet mehr Kontrolle als ältere Methoden.
Was ist CSS Flexbox?Apr 30, 2025 pm 03:20 PMIn Artikel wird CSS Flexbox erörtert, eine Layoutmethode zur effizienten Ausrichtung und Verteilung des Raums in reaktionsschnellen Designs. Es erklärt die Verwendung von Flexbox, vergleicht es mit CSS -Gitter und Details Browser -Unterstützung.
Wie können wir unsere Website mit CSS reagieren?Apr 30, 2025 pm 03:19 PMIn dem Artikel werden Techniken zum Erstellen von reaktionsschnellen Websites mithilfe von CSS erörtert, einschließlich Ansichtsfenster -Meta -Tags, flexiblen Gitter, Flüssigkeitsmedien, Medienabfragen und relativen Einheiten. Es deckt auch mit CSS -Raster und Flexbox zusammen und empfiehlt CSS -Framework
Was macht die CSS-Box-Größeneigenschaft?Apr 30, 2025 pm 03:18 PMIn dem Artikel wird die CSS-Box-Größeneigenschaft erörtert, in der die Berechnung der Elementabmessungen steuert. Es erklärt Werte wie Inhaltsbox, Border-Box und Padding-Box sowie deren Auswirkungen auf das Layout-Design und die Form von Formularausrichtung.
Wie können wir mit CSS animieren?Apr 30, 2025 pm 03:17 PMIn Artikel wird das Erstellen von Animationen mithilfe von CSS, Schlüsseleigenschaften und Kombination mit JavaScript erläutert. Hauptproblem ist die Browserkompatibilität.
Können wir mit CSS 3D -Transformationen zu unserem Projekt hinzufügen?Apr 30, 2025 pm 03:16 PMIn Artikel werden CSS für 3D -Transformationen, wichtige Eigenschaften, Browserkompatibilität und Leistungsüberlegungen für Webprojekte erläutert. (Charakterzahl: 159)
Wie können wir Gradienten in CSS hinzufügen?Apr 30, 2025 pm 03:15 PMIn dem Artikel werden CSS -Gradienten (linear, radial, wiederholt) beschrieben, um die Website -Visuals, das Hinzufügen von Tiefe, Fokus und moderne Ästhetik zu verbessern.
Was sind Pseudoelemente in CSS?Apr 30, 2025 pm 03:14 PMIn Artikel werden Pseudoelemente in CSS, deren Verwendung bei der Verbesserung des HTML-Stylings und der Unterschiede zu Pseudoklassen erläutert. Bietet praktische Beispiele.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
SublimeText3 Linux neue Version
SublimeText3 Linux neueste Version
ZendStudio 13.5.1 Mac
Leistungsstarke integrierte PHP-Entwicklungsumgebung
DVWA
Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software
EditPlus chinesische Crack-Version
Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion
SAP NetWeaver Server-Adapter für Eclipse
Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.
