Wie kann ich CSS3-N-Typ-Selektoren auf bestimmte Klassen beschränken?

N-te-Typ-CSS-3-Selektoren auf Klassen beschränken

Wie in Ihrem bereitgestellten Beispiel zu sehen ist, arbeitet der n-te-Typ-Selektor von CSS 3 basierend auf Elementtypen und nicht auf bestimmte Klassen. Dies kann zu Herausforderungen führen, wenn Sie die n-te-Typ-Auswahl auf eine bestimmte Klasse beschränken möchten.

Alternativer Ansatz mit n-ter-Kind-Klasse

Da n-te-von- Wenn die Klasse nicht existiert, besteht eine alternative Lösung darin, n-tes Kind zu verwenden. Der Selektor für das n-te untergeordnete Element wählt Elemente basierend auf ihrer Position innerhalb der untergeordneten Elemente ihres übergeordneten Elements aus.

Hier ist ein geändertes CSS:

.featured.module:nth-child(3n+3) {
  padding-right: 0;
  background: red;
}

In diesem überarbeiteten Code wird nicht jedes dritte n-te-Element als Ziel ausgewählt. of-type wählen wir jedes dritte untergeordnete Element aus, das die Klasse „module“ hat. Dieser Ansatz erzielt den gewünschten Effekt, jedes dritte .module-Element zu formatieren.

Manuelles Hinzufügen von Klassen

Eine weitere Option, wie in der bereitgestellten Lösung erwähnt, besteht darin, manuell ein hinzuzufügen neue Klasse für jedes dritte .Modul. Dieser Ansatz erfordert mehr manuelle Arbeit, bietet aber eine bessere Kontrolle über die Elementauswahl.

Denken Sie daran, Ihr CSS entsprechend zu ändern:

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

Das obige ist der detaillierte Inhalt vonWie kann ich CSS3-N-Typ-Selektoren auf bestimmte Klassen beschränken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!