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

Beheben von CSS-Problemen bei der Auswahl des ersten und letzten untergeordneten Elements

Wenn Sie Schwierigkeiten bei der Auswahl des ersten und letzten untergeordneten Elements mithilfe von CSS haben, ist es wichtig, den Kontext zu berücksichtigen Dein Code. In der bereitgestellten Fiddle sind die .area-Elemente direkte untergeordnete Elemente des Etikett. Um jedoch die Pseudoklassen :first-child und :last-child korrekt anzuwenden, ist es wichtig sicherzustellen, dass die .area-Elemente in einem Container verschachtelt sind.

Um dieses Problem zu beheben, fügen Sie ein Containerelement hinzu Ihre .area-Elemente. Dadurch wird ein geeigneter Kontext bereitgestellt, in dem die ersten und letzten untergeordneten Elemente anhand ihrer Position im Container identifiziert werden können.

Hier ist eine überarbeitete Version Ihres Codes:

.container {
  display: flex;
}

.area {
  height: 100px;
  width: 100px;
}

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

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

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

Durch die Verschachtelung der .area-Elemente innerhalb des .containers schaffen Sie eine klare Hierarchie. Die Pseudoklassen :first-child und :last-child können jetzt genau auf das erste und letzte untergeordnete Element des .containers 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!