Wie kann ich Elemente mit demselben Klassennamen basierend auf ihrer Position im DOM formatieren?

Targeting auf bestimmte Elemente mit Klassennamen: Ein CSS-n-th-Child-Ansatz

Herausforderung: Elemente mit demselben Klassennamen basierend auf ihrem selektiven Stil gestalten Position, unabhängig von ihrer Position im Markup.

Lösung: Verwenden Sie die Pseudoselektoren nth-child() oder nth-of-type(), um Elemente entsprechend ihrer Ordnungsposition innerhalb anzusprechen ein übergeordnetes Element.

nth-child() Pseudo-Selektor

Mit dem nth-child(n)-Pseudoselektor können Sie ein Element formatieren, das das n-te untergeordnete Element seines übergeordneten Elements ist. Um beispielsweise das erste Element mit der Klasse „myclass“ anzusprechen:

<code class="css">.parent_class:nth-child(1) {
  color: #000;
}</code>

Um das zweite und dritte Element anzusprechen, verwenden Sie die folgenden Selektoren:

<code class="css">.parent_class:nth-child(2) {
  color: #FFF;
}

.parent_class:nth-child(3) {
  color: #006;
}</code>

nth-of-type () Pseudo-Selektor

Der nth-of-type(n)-Pseudo-Selektor funktioniert ähnlich wie nth-child(), wählt jedoch Elemente basierend auf ihrem Typ innerhalb ihres übergeordneten Elements aus. Dies ist nützlich, wenn Sie mehrere Elemente desselben Typs in einem übergeordneten Element haben:

<code class="css">.myclass:nth-of-type(1) {
  color: #000;
}

.myclass:nth-of-type(2) {
  color: #FFF;
}

.myclass:nth-of-type(3) {
  color: #006;
}</code>

Beispiel-HTML:

<code class="html"><div class="parent_class">
  <div class="myclass">my text1</div>
  <!-- Other code -->

  <div class="myclass">my text2</div>
  <!-- Other code -->

  <div class="myclass">my text3</div>
  <!-- Other code -->
</div></code>

Das obige ist der detaillierte Inhalt vonWie kann ich Elemente mit demselben Klassennamen basierend auf ihrer Position im DOM formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!