Wie kann ich mit CSS das erste und letzte untergeordnete Element richtig auswählen?

Auswählen des ersten und letzten untergeordneten Elements mit CSS: Den Kontext verstehen

Das Auswählen des ersten oder letzten untergeordneten Elements in CSS erfordert ein klares Verständnis des Kontext, in dem das CSS angewendet wird. Wie im angegebenen HTML- und CSS-Snippet gezeigt, führt die direkte Anwendung der Pseudoklassen :first-child und :last-child auf .area-Elemente möglicherweise nicht zu den gewünschten Ergebnissen. Dies liegt daran, dass diese Pseudoklassen nur das erste und letzte untergeordnete Element des angegebenen übergeordneten Elements auswählen.

Im angegebenen Beispiel sind .area-Elemente keine untergeordneten Elemente eines angegebenen übergeordneten Elements innerhalb der HTML-Struktur. Sie sind direkte untergeordnete Elemente des Body-Elements, das andere Elemente wie Skript-Tags oder dynamisch hinzugefügte Inhalte enthalten kann.

Um das erste und letzte untergeordnete Element von .area-Elementen korrekt auszuwählen, muss ein Containerelement eingeführt werden. Durch das Einschließen der .area-Elemente in ein anderes Element, beispielsweise ein div mit einer eigenen Klasse, können die Pseudoklassen genau auf das erste und letzte untergeordnete Element in diesem Container abzielen.

Hier ist eine modifizierte HTML-Struktur, die das Richtige demonstriert Verwendung:

<div class="container">
  <div class="area">1</div>
  <div class="area">2</div>
  <div class="area">3</div>
  <div class="area">4</div>
</div>

Mit dieser Struktur wählt das folgende CSS den ersten und letzten .area korrekt aus Kinder:

.container .area:first-child {
  background-color: red;
}

.container .area:last-child {
  background-color: green;
}

Durch die Angabe des Containerelements als übergeordneter Selektor kann das CSS nun genau auf das erste und letzte untergeordnete Element der .area-Elemente in diesem Kontext abzielen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS das erste und letzte untergeordnete Element richtig auswählen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!