Wie wählt ich in der HTML -Struktur das erste untergeordnete Element mit einem bestimmten Klassennamen über CSS aus?

In der HTML -Struktur ist die präzise Positionierung des ersten untergeordneten Elements mit einem bestimmten Klassennamen ein gemeinsames CSS -Problem, insbesondere wenn die Anzahl der Kinderelemente ungewiss ist. Dieser Artikel zeigt anhand von Beispielen, wie dieses Problem mithilfe der erweiterten Funktionen des CSS -Selektors gelöst werden.

Angenommen, wir haben einen div -Container, der mehrere activebar und item -Klassenelemente enthält, und die Anzahl der activebar und item wird dynamisch geändert. Unser Ziel ist es, das erste Element der item nur über CSS auszuwählen.

Beispiel für HTML -Struktur:

<div class="main">
  <div class="activebar"></div>
  <div class="activebar"></div>
  <div class="activebar"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Der einfache Pseudoklasse-Selektor der Pseudo-Klasse first-child oder first-of-type gilt hier nicht, da first-child nur das erste untergeordnete Element des übergeordneten Elements auswählt, während first-of-type nur das erste derselben Typelemente auswählt.

Problemumgehung: Verwenden Sie die erweiterte Funktionalität nth-child Selektors. Das moderne CSS ermöglicht die Verwendung komplexer Selektoren im nth-child , den Umfang zu definieren.

Mit dem folgenden CSS -Code können Sie das erste item genau auswählen:

 .Main> .Item: nth-Kind (n von .Item) {
  /* Stilregeln*//
}

Die Funktion von nth-child(n of .item) ist: Unter allen untergeordneten Elementen .main Elements werden nur jene Kinderelemente mit der .item Klasse berücksichtigt, und die erste wird aus ihm ausgewählt ( n repräsentiert die erste). Dies ignoriert das activebar -Element effektiv darin und findet direkt das erste item .

Auch wenn sich die Anzahl der activebar und item ändert, können wir das erste item immer genau auswählen, wodurch die Steuerung des flexiblen Stils erreicht wird.

Das obige ist der detaillierte Inhalt vonWie wählt ich in der HTML -Struktur das erste untergeordnete Element mit einem bestimmten Klassennamen über CSS aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!