Ein kurzer Überblick über CSS3-Pseudoklassenselektoren

Vorwort

Wenn CSS die Grundfertigkeit der Front-End-Entwicklung ist, dann sind „Selektoren“ die Grundlage der Grundlage. Wenn Sie diese verwirrenden Selektoren kopieren oder lernen, dann sind Sie hier richtig, mein alter Freund.

In diesem Artikel werden die Funktionen direkt verglichen, damit Sie sie schnell beherrschen:

• erstes Kind
• letztes Kind
• Erster seines Typs
• Letzter Typ
• Einzelkind
• nur vom Typ
• n-tes Kind
• n-tes-letztes-Kind
• n-ter-Typ
• n-ter-letzter-des-Typs

erstes Kind und letztes Kind

Diese beiden Selektoren gleichen das erste Element in einer Gruppe von Geschwistern ab:

Hinweis: Damit dieser Selektor funktioniert, müssen eigentlich drei Bedingungen erfüllt sein:

• Entspricht dem vorherigen Selektor, in diesem Fall p
• Ist eine Gruppe von Geschwisterelementen
• Ist das erste (oder letzte) Element

Auf last-child werde ich hier nicht näher eingehen. Der Unterschied besteht darin, dass es von hinten nach vorne übereinstimmt.

Erster des Typs und Letzter des Typs

Diese beiden Selektoren stimmen mit dem ersten (letzten) Element desselben Typs überein, unabhängig davon, ob das Element tatsächlich das erste (letzte) Element in der Gruppe ist:

Hinweis: Damit dieser Selektor funktioniert, müssen eigentlich zwei Bedingungen erfüllt sein:

• Entspricht dem vorherigen Selektor, in diesem Fall p
• Ist eine Gruppe von Geschwisterelementen

Auf last-of-type werde ich hier nicht näher eingehen. Der Unterschied besteht darin, dass es von hinten nach vorne übereinstimmt.

Einzelkind & Einziger vom Typ

only-child entspricht Elementen, die keine Geschwisterelemente haben, also „verwaiste“ Elemente:

Die „isolierten“ Elemente in der obigen Abbildung sind das erste <p> und das verschachtelte <span> , die beide vom Selektor abgeglichen werden.

only-of-type stimmt mit Elementen eines Typs überein, der in einer Menge gleichgeordneter Elemente eindeutig ist:

Da das erste <p> , das zweite <p> und das letzte <span> in ihrem übergeordneten Elementtyp alle eindeutig sind, werden sie vom Selektor abgeglichen.

n-tes Kind & n-tes-letztes Kind

Das Interessanteste an diesen Pseudoklassenselektoren ist, dass sie eine Formel an+b übergeben können, um Elemente gemäß dieser Formel abzugleichen. Es gibt viele Möglichkeiten, mit dieser Formel zu spielen, was dazu geführt hat, dass sich viele Leute alle Kombinationen dieser Formel und den passenden Inhalt merken.

Tatsächlich wird unsere Denkweise durch CSS verfestigt, da es sehr einfach ist, die Regeln aus mathematischer Sicht herauszufinden. Als Beispiel gibt es den folgenden Code:

<Stil>
  p:n-tes-Kind(2n+1){
    Farbe: blau;
  }
</Stil>
<Text>
  <p>Erste Zeile</p>
  <p>Zeile 2</p>
  <p>Zeile 3</p>
</body>

Denkmodus:

1. Sammeln Sie zunächst die übereinstimmenden Elemente, in diesem Beispiel drei <p> -Tags
2. Zählen Sie vom Index 0 bis 2, um die Anzahl der <p> darzustellen, und setzen Sie sie zur Auswertung in die Formel ein.
3. Ordnen Sie die Elemente den entsprechenden Indizes zu (die Elementindizes beginnen bei 1 zu zählen)

Ergebnis: