Wie funktioniert der CSS3-Selektor „:first-of-type' mit Klassennamen?

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

Es ist ein weit verbreitetes Missverständnis, dass der CSS3-Selektor :first-of -type kann in Verbindung mit einem Klassennamen verwendet werden, um das erste Element mit dieser bestimmten Klasse auszuwählen. Dies ist jedoch nicht der Fall.

Die Pseudoklasse :first-of-type zielt auf das erste Element ihres Typs unter Geschwistern ab. Daher wählt die Verwendung eines Klassenselektors mit :first-of-type das erste Element mit dieser Klasse aus, das auch das erste Element seines Typs ist.

Zur Veranschaulichung:

p:first-of-type { color: blue; }

Diese Regel färbt den ersten Absatz seines übergeordneten Elements blau.

p.myclass1:first-of-type { color: red; }

Diese Regel färbt den ersten Absatz mit der Klasse „myclass1“ rot.

Wenn es jedoch mehrere Absätze mit der Klasse „myclass1“ gibt, ist nur der erste Absatz von dieser Regel betroffen, da sie auf den ersten Absatz seines Typs abzielt, der auch die angegebene Klasse hat.

Um das erste Vorkommen einer Klasse auszuwählen, unabhängig von ihrem Typ, steht kein direkter CSS3-Selektor zur Verfügung. Stattdessen kann eine Problemumgehung mit mehreren Selektoren und Kaskadierung eingesetzt werden:

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

Diese Lösung funktioniert, indem die Anfangsfarbe für das Element mit der Klasse „myclass1“ festgelegt wird. Die nachfolgende Regel überschreibt dann die Farbe für alle anderen Elemente derselben Klasse, die Geschwister des ersten Elements sind.

Im Wesentlichen gilt: Denken Sie daran, dass :first-of-type auf das erste Element seines Typs abzielt und nicht auf Das erste Element einer bestimmten Klasse ist entscheidend, wenn es in CSS3-Selektoren verwendet wird.

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