Kann der „:first-of-type'-Selektor von CSS3 auf die erste Instanz einer bestimmten Klasse abzielen?

Kann CSS3:First-of-Type-Selektor auf bestimmte Klassennamen abzielen?

Während der CSS3:First-of-Type-Selektor auswählen kann Da es sich um das erste Element eines bestimmten Typs (z. B. div, p) handelt, kann es nicht unabhängig verwendet werden, um auf das erste Vorkommen eines Klassennamens abzuzielen. Dies liegt daran, dass die Verwendung eines Klassenselektors (oder Typselektors) mit :first-of-type die Auswahl eines Elements bedeutet, das:

• die angegebene Klasse (oder den angegebenen Typ) hat
• Ist das erstes Element seines Typs unter seinen Geschwistern

Es gibt jedoch keinen inhärenten :first-of-class-Selektor in CSS, der ausschließlich das auswählt erste Instanz einer Klasse.

Workaround

Um diese Funktionalität zu erreichen, kann ein Workaround eingesetzt werden:

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default or inherited from parent */; }

Dieser Workaround nutzt das Folgende Geschwisterkombinator (~), um alle Vorkommen von .myclass1 außer dem ersten zu formatieren. Die erste .myclass1 erbt ihre Farbe von ihrem übergeordneten Div (oder verwendet standardmäßig die Browser-Standardeinstellungen).

Weitere Einblicke und visuelle Darstellungen zu dieser Problemumgehung finden Sie unter:

• [W3Schools : Verwendung von Kind und Geschwister Selektoren](https://www.w3schools.com/css/sel_combinators.asp)
• [CSS-Tricks: Styling des ersten Geschwisters](https://css-tricks.com/styling-first-sibling /)

Das obige ist der detaillierte Inhalt vonKann der „:first-of-type'-Selektor von CSS3 auf die erste Instanz einer bestimmten Klasse abzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!