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

Inhaltsverzeichnis

List of fruits

:nth-child() und :nth-last-child()

:empty

verwenden :nth-of-type und :nth-last-of-type

FAQs über CSS-Pseudoklassen und indexbasierte Elementstile

Was ist eine CSS-Pseudoklasse?

:nth-child Wie funktionieren Pseudoklassen?

:nth-child und :nth-of-type?

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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!

Erklärung dieser Website

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

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

Wie kann ich KB5055523 in Windows 11 nicht installieren?

3 Wochen vor By DDD

Wie kann ich KB5055518 in Windows 10 nicht installieren?

3 Wochen vor By DDD

<🎜>: Dead Rails - wie man Wölfe zähme

4 Wochen vor By DDD

Kraftstufen für jeden Feind & Monster in R.E.P.O.

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

<🎜>: Wachsen Sie einen Garten - Komplette Mutationsführer

2 Wochen vor By DDD

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Java-Tutorial

1657

CakePHP-Tutorial

1415

Laravel-Tutorial

1309

PHP-Tutorial

1257

C#-Tutorial

1229

Related knowledge

Google -Schriftarten variable Schriftarten Apr 09, 2025 am 10:42 AM

Ich sehe, dass Google -Schriftarten ein neues Design (Tweet) ausgelöst haben. Im Vergleich zur letzten großen Neugestaltung fühlt sich dies viel iterativer an. Ich kann den Unterschied kaum erkennen

So erstellen Sie einen animierten Countdown -Timer mit HTML, CSS und JavaScript Apr 11, 2025 am 11:29 AM

Haben Sie jemals einen Countdown -Timer für ein Projekt benötigt? Für so etwas ist es möglicherweise natürlich, nach einem Plugin zu greifen, aber es ist tatsächlich viel mehr

HTML -Datenattributehandbuch Apr 11, 2025 am 11:50 AM

Alles, was Sie schon immer über Datenattribute in HTML, CSS und JavaScript wissen wollten.

Wie wähle ich ein untergeordnetes Element mit dem erstklassigen Namen über CSS aus? Apr 05, 2025 pm 11:24 PM

Wenn die Anzahl der Elemente nicht festgelegt ist, wählen Sie das erste untergeordnete Element des angegebenen Klassennamens über CSS aus. Bei der Verarbeitung der HTML -Struktur begegnen Sie häufig auf verschiedene Elemente ...

Warum werden die lila abgeschnittenen Bereiche im Flex -Layout fälschlicherweise als 'Überlaufraum' betrachtet? Apr 05, 2025 pm 05:51 PM

Fragen zu lila Schrägstrichen in Flex -Layouts Bei der Verwendung von Flex -Layouts können Sie auf einige verwirrende Phänomene stoßen, wie beispielsweise in den Entwicklerwerkzeugen (D ...

Wie wir eine statische Site erstellt haben, die Tartan -Muster in SVG erzeugt Apr 09, 2025 am 11:29 AM

Tartan ist ein gemustertes Tuch, das normalerweise mit Schottland verbunden ist, insbesondere mit ihren modischen Kilts. Auf Tartanify.com haben wir über 5.000 Tartan gesammelt

Ein Beweis für das Konzept, um Sass schneller zu machen Apr 16, 2025 am 10:38 AM

Zu Beginn eines neuen Projekts erfolgt die SASS -Zusammenstellung im Blinzeln eines Auges. Dies fühlt sich gut an, besonders wenn es mit Browsersync kombiniert ist, das nachlädt

Wie kann in der Front-End-Entwicklung CSS und JavaScript verwendet werden, um Suchlight-Effekte ähnlich wie die Schnittstelle zwischen Windows 10 Einstellungen zu erzielen? Apr 05, 2025 pm 10:21 PM

So implementieren Sie Windows-ähnlich in der Front-End-Entwicklung ...

See all articles

CSS-Pseudoklassen: Styling-Elemente basierend auf ihrem Index

:first-child :last-child

:nth-child() und :nth-last-child()

:only-child

<code>:empty

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

verwenden :nth-of-type und :nth-last-of-type

FAQs über CSS-Pseudoklassen und indexbasierte Elementstile

Was ist eine CSS-Pseudoklasse?

:nth-child Wie funktionieren Pseudoklassen?

:nth-child und :nth-of-type?

verwenden? :nth-child

mit anderen Pseudoklassen verwenden? :nth-child

und :nth-child? :nth-of-type

mit Pseudoelementen verwenden? :nth-child

Gibt es Probleme mit Browserkompatibilität? :nth-child

Heiße KI -Werkzeuge

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1

SublimeText3 chinesische Version

Senden Sie Studio 13.0.1

Dreamweaver CS6

SublimeText3 Mac-Version

Heiße Themen

`:first-child` `:last-child`

`:nth-child()` und `:nth-last-child()`

`:only-child`

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

verwenden `:nth-of-type` und `:nth-last-of-type`

`:nth-child` Wie funktionieren Pseudoklassen?

`:nth-child` und `:nth-of-type`?

verwenden? `:nth-child`

mit anderen Pseudoklassen verwenden? `:nth-child`

und `:nth-child`? `:nth-of-type`

mit Pseudoelementen verwenden? `:nth-child`

Gibt es Probleme mit Browserkompatibilität? `:nth-child`