CSS-Pseudoklassen: Styling-Elemente basierend auf ihrem Index

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() und odd Pseudoklasse sind funktional und können Parameter in Form von even Schlüsselwort, An B Schlü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-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(),
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

und

bei der Definition durch einfache Selektoren die geringsten Nebenwirkungen.

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2>List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</code>

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

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.

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

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:

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2>List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</code>

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:

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2>List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</code>

Dies gibt uns die folgenden Ergebnisse.

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

Grammatik ins Spiel: An B

<code class="language-css">tr:nth-child(even) {
  background: rgba(96, 125, 139, 0.1);
}</code>

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.

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

<code class="language-css">.item:nth-child(6) {
  background: #e91e63;
}</code>

gibt es hier keinen Schrittgrößenwert. Daher entspricht N 8 jedes Element N, das vom achten Element beginnt, wie unten gezeigt.

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:

<code class="language-css">.item:nth-child(3n) {
  background: #e91e63;
}</code>

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

verwendet

<code class="language-css">.item:nth-child(n+8) {
  background: #e91e63;
}</code>

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;}

<p></p>

<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

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.

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

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.

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

und

:first-of-type

Mit

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2>List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</code>

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

mit diesem Element überein, wie unten gezeigt.

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:

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2>List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</code>

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

verwenden

<code class="language-css">tr:nth-child(even) {
  background: rgba(96, 125, 139, 0.1);
}</code>

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

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

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

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!