Wie kann man mit CSS-Pseudoklassen die ersten und letzten Kinder effektiv ansprechen?

So zielen Sie auf erste und letzte untergeordnete Elemente in CSS ab

Die Auswahl der ersten und letzten untergeordneten Elemente mithilfe von CSS kann schwierig sein, da das „erste“ Die Pseudoklassen „-child“ und „last-child“ gelten für die unmittelbaren untergeordneten Elemente eines übergeordneten Elements.

Im bereitgestellten CSS-Code auf das erste und letzte untergeordnete Element ausgerichtet Elemente der Klasse „.area“ funktionieren nicht, da die Elemente keine direkten untergeordneten Elemente eines Containerelements sind. Damit die Auswahl funktioniert, können Sie ein Containerelement hinzufügen und seine untergeordneten Elemente als Ziel angeben.

Hier ist ein Beispiel, das ein Containerelement enthält:

.container {
  display: flex;
}

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

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

.container > .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>

Mit dieser Änderung , werden die „.area“-Elemente zu direkten Kindern des „.container“-Elements, und die Pseudoklassen „first-child“ und „last-child“ können verwendet werden, um das erste und letzte untergeordnete Element auszuwählen entsprechend.

Das obige ist der detaillierte Inhalt vonWie kann man mit CSS-Pseudoklassen die ersten und letzten Kinder effektiv ansprechen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!