Wie kann ich mit CSS „nth-of-type' jedes dritte Element mit einer bestimmten Klasse ansprechen?

CSS 3 n-tel des Typs auf Klasse beschränkt

Mit dem n-tel-Typ-Selektor können Sie jedes n-te Kind eines bestimmten Typs auswählen . Es kann jedoch schwierig sein, diese Auswahl auf eine bestimmte Klasse zu beschränken.

Problem:

Sie möchten jedes dritte .module-Element unabhängig von seinem Markup dynamisch ansprechen . Der n-tel-Typ berechnet jedoch basierend auf dem Elementtyp und nicht auf der Klasse.

Lösung:

Derzeit gibt es keine direkte Möglichkeit, den n-tel-Typ zu begrenzen -Typ zu einer bestimmten Klasse. Eine Problemumgehung besteht darin, jedem dritten .module-Element manuell eine zusätzliche Klasse hinzuzufügen.

Zum Beispiel im bereitgestellten HTML:

<section class="featured module">
  <h1>NOT A VIDEO</h1>
</section>

<section class="featured module third">
  <h1>NOT A VIDEO (3)</h1>
</section>

<section class="featured module">
  <h1>NOT A VIDEO</h1>
</section>

<section class="featured module third">
  <h1>NOT A VIDEO (6)</h1>
</section>

Anschließend wenden Sie die folgenden CSS-Stile an:

.featured.module.third {
  padding-right: 0;
  background: red;
}

Dadurch wird nun jedes dritte Vorkommen der .module-Klasse mit dem zusätzlichen .third formatiert Klasse.

Hinweis:

Diese Problemumgehung erfordert manuelle Wartung, wenn Sie .module-Elemente hinzufügen oder entfernen. Erwägen Sie für fortgeschrittenere Szenarien die Verwendung von JavaScript- oder CSS-Präprozessoren, um die erforderlichen Klassen automatisch zu generieren.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS „nth-of-type' jedes dritte Element mit einer bestimmten Klasse ansprechen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!