Kann ich den „:first-of-type'-Selektor von CSS3 mit Klassennamen verwenden?

Verwendung des CSS3-Selektors :first-of-type mit Klassennamen

Man könnte sich fragen, ob es möglich ist, den CSS3-Selektor :first zu verwenden -of-type in Verbindung mit einem Klassennamen. Es reicht jedoch möglicherweise nicht aus, nur diesen Selektor allein zu verwenden.

Erklärung

Die :first-of-type-Pseudoklasse zielt auf das erste Element eines bestimmten Typs innerhalb ihrer ab geschwister. In Kombination mit einem Klassenselektor filtert es nach Elementen, die beide die angegebene Klasse besitzen und das erste Element ihres Typs unter ihren Geschwistern sind.

Leider verfügt CSS nicht über einen „:first-of-class“-Selektor Findet ausschließlich das erste Vorkommen eines Elements mit einer bestimmten Klasse.

Problemumgehung

Um dieses Problem zu umgehen Einschränkung kann man die folgende Technik anwenden:

.myclass1 {
  color: red;
}

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

Erklärung

Diese Problemumgehung verwendet den allgemeinen Geschwisterkombinator (~), um alle Elemente mit der Klasse myclass1 als Ziel zu verwenden wird ein anderes Element derselben Klasse vorangestellt. Indem wir die Farbe dieser nachfolgenden Elemente auf Standard oder vom übergeordneten Div geerbt festlegen, unterdrücken wir effektiv die rote Farbe für alle außer dem ersten Vorkommen von .myclass1.

Zusätzliche Ressourcen

Detailliertere Erklärungen und visuelle Darstellungen dieser Problemumgehung finden Sie hier:

• [Mozilla Developer Netzwerk](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#Adjacent_sibling_selectors)
• [CSS-Tricks](https://css-tricks.com/almanac/ selectors/c/combinators/#:~:text=Der ~-Kombinator wählt alle aus,= 30 (Klasse hat Spezifität))

Das obige ist der detaillierte Inhalt vonKann ich den „:first-of-type'-Selektor von CSS3 mit Klassennamen verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!