CSS-Pseudoklassen: Styling-Elemente basierend auf ihrem Index-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

CSS-Pseudoklassen: Styling-Elemente basierend auf ihrem Index

Lisa Kudrow

Feb 19, 2025 am 11:26 AM

CSS-Selektor: Auswahl der Pseudoklasse basierend auf der Position von Elementen im Dokument Subree

CSS Pseudo-classes: Styling Elements Based on Their Index

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() und odd Pseudoklasse sind funktional und können Parameter in Form von even Schlüsselwort, An B Schlüsselwort, Ganzzahl oder
:only-child <code>:empty Pseudoklasse entspricht dem Element, wenn das Element das einzige Kind eines anderen Elements ist.
:first-of-type CSS 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(),

: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

und

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. CSS Pseudo-classes: Styling Elements Based on Their Index

: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

und getippt.

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.

CSS Pseudo-classes: Styling Elements Based on Their Index

`: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:

sein sollte

odd Schlüsselwörter
even Schlüsselwörter
eine Ganzzahl, wie 2 oder 8 oder
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.

Sowohl

: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>

CSS Pseudo-classes: Styling Elements Based on Their Index

Schalten :nth-child zu :nth-last-child wird dieses Band umkehren, da die Anzahl unten startet, wie unten gezeigt.

CSS Pseudo-classes: Styling Elements Based on Their Index

Wie kann man einige komplexe Beispiele für komplexere Parameter ausprobieren? Wir beginnen mit dem unten gezeigten Dokument, das 20 Elemente enthält.

CSS Pseudo-classes: Styling Elements Based on Their Index

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.

CSS Pseudo-classes: Styling Elements Based on Their Index

Aber was ist, wenn wir alle drei Elemente auswählen wollen? Hier kommt

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.

CSS Pseudo-classes: Styling Elements Based on Their Index

Es gibt einen Ort, an dem die Dinge interessanter werden. Wir 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.

CSS Pseudo-classes: Styling Elements Based on Their Index

Hinweis: Negativer Offset

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)

Wir können auch alle drei Elemente mit Offset- und Schrittgrößenwerten aus auswählen, beginnend mit dem fünften:

.item:nth-child(3n) {
  background: #e91e63;
}

Sie können die Ergebnisse dieses Selektors im folgenden Bild sehen.

CSS Pseudo-classes: Styling Elements Based on Their Index

`: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

verwendet

.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>   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

Pseudoklasse verwenden, um zu vermeiden, dass Stile auf diese Elemente angewendet werden.

Wählen Sie bestimmte Elementetypen nach ihrem Index

aus p:nth-last-child(2)

Die im vorherige Abschnitt erörterte Pseudoklasse entspricht dem Element, wenn sie eine bestimmte Position im Dokument-Subtree einnimmt. Zum Beispiel wählt

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.

: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

nur dann mit dem fünften Element übereinstimmt, wenn es sich um ein P -Element handelt, entspricht

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. CSS Pseudo-classes: Styling Elements Based on Their Index

`:first-of-type` `:last-of-type` Verwenden Sie `:only-type`,

und

:first-of-type

Mit

<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. CSS Pseudo-classes: Styling Elements Based on Their Index

: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

mit diesem Element überein, wie unten gezeigt.

CSS Pseudo-classes: Styling Elements Based on Their Index

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.

CSS Pseudo-classes: Styling Elements Based on Their Index

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():

verwenden

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.

CSS Pseudo-classes: Styling Elements Based on Their Index

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).

CSS Pseudo-classes: Styling Elements Based on Their Index

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).

Was ist der Unterschied zwischen

`: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> wählt das zweite <code>p:nth-of-type(2) Element und unabhängig von seinen aus Position in anderen Geschwisterelementen. <code>

Wie wählst du das erste, zweite oder dritte Element mit dem angegebenen Klassennamen aus?

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)

Kann ich negative Werte in

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

Wie wählt ich jedes gleichmäßige oder ungerade Element aus?

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)

Kann ich

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

Kann ich

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

Alle Bilder verbleiben in ihrem ursprünglichen Format und Ort.

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!

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

Entmystifizierende Bildschirmleser: Zugrunde Formen und Best PracticesMar 08, 2025 am 09:45 AM

Dies ist der 3. Beitrag in einer kleinen Serie, die wir in Form von Barrierefreiheit gemacht haben. Wenn Sie den zweiten Beitrag verpasst haben, lesen Sie "Verwalten des Benutzerfokus mit: Fokus-Sichtbar". In

Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms FrameworkMar 07, 2025 am 11:33 AM

Dieses Tutorial zeigt, dass professionelle JavaScript-Formulare mithilfe des Frameworks Smart Forms erstellt werden (Hinweis: Nicht mehr verfügbar). Während der Rahmen selbst nicht verfügbar ist, bleiben die Prinzipien und Techniken für andere Formbauer relevant.

Hinzufügen von Kastenschatten zu WordPress -Blöcken und -ElementenMar 09, 2025 pm 12:53 PM

Die CSS-Box-Shadow- und Umrisseigenschaften haben Thema gewonnen. JSON-Unterstützung in WordPress 6.1. Sei ein paar Beispiele für die Funktionsweise in realen Themen und welche Optionen wir diese Stile auf WordPress -Blöcke und Elemente anwenden müssen.

Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte)Mar 04, 2025 am 10:22 AM

In diesem Artikel werden die auf dem Envato -Markt verfügbaren Top -Skripte für PHP -Formulierungen untersucht und deren Funktionen, Flexibilität und Design verglichen. Lassen Sie uns vor dem Tauchen in bestimmte Optionen verstehen, was ein PHP -Formular Builder ist und warum Sie einen verwenden würden. Eine PHP -Form

Arbeiten mit GraphQL CachingMar 19, 2025 am 09:36 AM

Wenn Sie kürzlich mit GraphQL gearbeitet oder seine Vor- und Nachteile überprüft haben, haben Sie zweifellos Dinge wie "GraphQL nicht unterstützen Caching" oder gehört

Machen Sie Ihren ersten Seltsamen -Sufle -ÜbergangMar 15, 2025 am 11:08 AM

Die Sufelte Transition -API bietet eine Möglichkeit, Komponenten zu beleben, wenn sie das Dokument eingeben oder verlassen, einschließlich benutzerdefinierter Svelte -Übergänge.

Show, Don ' TellMar 16, 2025 am 11:49 AM

Wie viel Zeit damit, die Inhaltspräsentation für Ihre Websites zu entwerfen? Wenn Sie einen neuen Blog -Beitrag schreiben oder eine neue Seite erstellen, denken Sie darüber nach

Edle und coole CSS -Scrollbars: Ein SchaufensterMar 10, 2025 am 11:37 AM

In diesem Artikel werden wir in die Welt der Scrollbars eintauchen. Ich weiß, es klingt nicht zu glamourös, aber vertrau mir, eine gut gestaltete Seite geht Hand in Hand

See all articles

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

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

2 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌

Repo: Wie man Teamkollegen wiederbelebt

1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt

1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌

Wie lange dauert es, um Split Fiction zu schlagen?

4 Wochen vorByDDD

R.E.P.O. Dateispeicherspeicherort: Wo ist es und wie schützt sie?

4 Wochen vorByDDD

Heiße Werkzeuge

Herunterladen der Mac-Version des Atom-Editors

Der beliebteste Open-Source-Editor

Dreamweaver CS6

Visuelle Webentwicklungstools

Sicherer Prüfungsbrowser

Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.

MantisBT

Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.