Comment le sélecteur CSS3 `:first-of-type` fonctionne-t-il avec les noms de classe ?

Utiliser le sélecteur CSS3 :first-of-type avec un nom de classe

C'est une idée fausse courante selon laquelle le sélecteur CSS3 :first-of -type peut être utilisé conjointement avec un nom de classe pour sélectionner le premier élément avec cette classe spécifique. Cependant, ce n'est pas le cas.

La pseudo-classe :first-of-type cible le premier élément de son type parmi les frères et sœurs. Par conséquent, l'utilisation d'un sélecteur de classe avec :first-of-type sélectionne le premier élément de cette classe qui est également le premier élément de son type.

Pour illustrer :

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

Cette règle rendra le premier paragraphe de son élément parent bleu.

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

Cette règle transformera le premier paragraphe avec la classe "myclass1" rouge.

Cependant, s'il existe plusieurs paragraphes avec la classe « maclasse1 », seul le premier paragraphe sera affecté par cette règle, car elle cible le premier paragraphe de son type qui possède également la classe spécifiée.

Pour sélectionner la première occurrence d'une classe, quel que soit son type, aucun sélecteur CSS3 direct n'est disponible. Au lieu de cela, une solution de contournement impliquant plusieurs sélecteurs et une mise en cascade peut être utilisée :

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

Cette solution fonctionne en définissant la couleur initiale de l'élément avec la classe "myclass1". La règle suivante remplace ensuite la couleur de tous les autres éléments de la même classe qui sont frères et sœurs du premier élément.

En substance, rappelez-vous que :first-of-type cible le premier élément de son type, plutôt que le premier élément avec une classe donnée, est crucial lors de son utilisation dans les sélecteurs CSS3.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!