Kann ich den :first-of-type-Selektor verwenden, um das erste Element mit einer bestimmten Klasse auszuwählen?

:first-of-type-Selektor und Klassenauswahl

Der :first-of-type-Selektor in CSS3 dient zur Auswahl des ersten Element eines bestimmten Typs (z. B. p, div usw.) unter seinen Geschwistern. Es entsteht jedoch ein häufiges Missverständnis, wenn versucht wird, es in Verbindung mit einem Klassennamen zu verwenden.

Frage:

Ist es möglich, :first-of-type zu verwenden? Selektor, um das erste Element mit einer bestimmten Klasse auszuwählen Name?

Antwort:

Leider ist es nicht möglich, dies mit einem einzigen Selektor zu erreichen. Die :first-of-type-Pseudoklasse arbeitet mit Elementtypen, nicht mit Klassennamen. Die Verwendung eines Klassenselektors bedeutet, dass Elemente ausgewählt werden, die die angegebene Klasse haben und auch die ersten ihres Typs innerhalb ihrer Geschwistergruppe sind.

Problemumgehung:

Wie es gibt no :First-of-Class-Selektor, der von CSS bereitgestellt wird. Eine Problemumgehung kann verwendet werden, um auf das erste Vorkommen einer Klasse abzuzielen:

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

Hier: Die erste Klassendeklaration setzt die Farbe aller Elemente mit der Klasse „myclass1“ auf Rot. Die nachfolgende Deklaration zielt auf jedes Element mit der Klasse „myclass1“, dem unmittelbar ein anderes Element mit derselben Klasse vorangeht. Diese letztere Deklaration setzt die Farbe für alle außer dem ersten Vorkommen der Klasse auf ihren Standard- oder geerbten Wert zurück.

Detaillierte Erklärungen und Abbildungen dieser Problemumgehung finden Sie im Folgenden Artikel:

• https://css-tricks.com/the-problem-with-first-child-selector/
• https://www.quirksmode.org/css /contents.html#first-of-type-sibling

Das obige ist der detaillierte Inhalt vonKann ich den :first-of-type-Selektor verwenden, um das erste Element mit einer bestimmten Klasse auszuwählen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!