Heim >Web-Frontend >CSS-Tutorial >:first-child vs. :first-of-type: Wann sollte ich die einzelnen CSS-Pseudoklassen verwenden?

:first-child vs. :first-of-type: Wann sollte ich die einzelnen CSS-Pseudoklassen verwenden?

Barbara Streisand
Barbara StreisandOriginal
2024-12-09 04:06:18937Durchsuche

:first-child vs. :first-of-type: When Should I Use Each CSS Pseudo-class?

Elementauswahl mit :first-child vs. :first-of-type

In CSS die Pseudoklassen :first-child und :first-of-type wählen beide Elemente basierend auf ihrer Position innerhalb ihres übergeordneten Elements aus. Sie unterscheiden sich jedoch darin, wie sie „first“ definieren.

Element:first-child

:first-child wählt unabhängig davon das erste untergeordnete Element seines angegebenen übergeordneten Elements aus seines Elementtyps. Im bereitgestellten Beispiel:

div:first-child

Dieser Selektor würde mit allen

Elemente, die das erste untergeordnete Element ihres übergeordneten Elements sind. Wenn das übergeordnete Element andere Elementtypen enthält, werden diese nicht ausgewählt.

Element:first-of-type

:first-of-type wählt den ersten aus Instanz eines bestimmten Elementtyps innerhalb seines übergeordneten Elements. Es entspricht dem ersten

Element, auch wenn es insgesamt nicht das erste untergeordnete Element ist. Zum Beispiel:

div:first-of-type

Im bereitgestellten HTML:

<div class="parent">
  <div>Child</div>
  <h1>

:first-of-type würde das

mit der Klasse „parent“ als erster Instanz eines
Element, während das

mit der ID „first“ wäre die erste Instanz eines

element.

Hauptunterschiede

  • Elementhierarchie: :First-Child-Übereinstimmungen basierend auf der Child-Reihenfolge, während :First-of- Typübereinstimmungen basierend auf Elementtyp und Position innerhalb dieses Typs.
  • Anzahl von Übereinstimmungen: :first-child kann nur mit einem Element pro übergeordnetem Element übereinstimmen, während :first-of-type mit mehreren Elementen desselben Typs übereinstimmen kann.
  • Spezifität: :first- of-type hat im Allgemeinen eine höhere Spezifität als :first-child, was bedeutet, dass es in CSS Vorrang hat Regeln.

Beispielverwendung

Verwenden Sie :first-child, um Folgendes auszuwählen:

  • Das erste Listenelement in einer ungeordneten Liste: ul li:first-child
  • Der Titel des ersten Blogbeitrags in eine Liste: Artikel .blog-post:first-child h2

Verwenden Sie :first-of-type, um Folgendes auszuwählen:

  • Die erste Überschrift (

    ,

    usw.) in einem Dokument: Hauptteil :first-of-type

  • Die erste Schaltfläche in einem Formular: Formularschaltfläche:first-of-type

Das obige ist der detaillierte Inhalt von:first-child vs. :first-of-type: Wann sollte ich die einzelnen CSS-Pseudoklassen verwenden?. 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