Wie kann ich CSS „nth-of-type' verwenden, um Elemente basierend auf Position und Klasse auszuwählen?

CSS 3 nth-of-type: Beschränkung auf bestimmte Klassen

Der nth-of-Type-Selektor von CSS 3 ermöglicht Entwicklern die Auswahl von Elementen basierend auf über ihre Stellung innerhalb einer Geschwistergruppe. Derzeit gibt es jedoch eine Einschränkung bei der Auswahl von Elementen basierend auf ihrer Klasse.

Insbesondere berücksichtigt nth-of-type bei der Bestimmung der Position des Elements alle Geschwisterelemente, unabhängig von ihrer Klasse. Das heißt, wenn Sie jedes dritte Element mit einer bestimmten Klasse auswählen möchten, kann nth-of-type allein dies nicht erreichen.

Zum Beispiel möchten Sie im bereitgestellten HTML jedes dritte Element mit der Klasse auswählen ".Modul". Durch die Verwendung von „.featured.module:nth-of-type(3n 3)“ wird jedoch auch das Element „.featured.video“ ausgewählt, da es insgesamt auch das dritte Geschwisterelement ist.

Lösung

Leider gibt es aufgrund der aktuellen Einschränkungen von CSS keine direkte Möglichkeit, nth-of-type auf eine bestimmte Klasse zu beschränken. Um dieses Problem zu umgehen, könnten Sie erwägen, jedem dritten „.module“-Element manuell eine eindeutige Klasse wie „.module3“ oder „.module6“ hinzuzufügen. Dies würde es Ihnen ermöglichen, stattdessen nth-of-type zur Auswahl basierend auf der eindeutigen Klasse zu verwenden.

Hinweis: nth-of-class ist in CSS 3 kein gültiger Selektor warum es nicht möglich ist, es als Lösung zu verwenden.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS „nth-of-type' verwenden, um Elemente basierend auf Position und Klasse auszuwählen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!