Pourquoi `:first-child` ne sélectionne-t-il pas mon H1 ?

Pourquoi :first-child ne sélectionne pas le H1 attendu

Dans le scénario présenté, le but est de colorer le premier élément h1 dans un div avec la classe detail_container blue. Le CSS utilisé (:first-child) suppose que l'élément ciblé est le premier enfant de son parent, mais dans ce cas, le premier enfant du parent est l'élément ul.

Comprendre :first-child

Le sélecteur :first-child sélectionne le premier élément enfant d'un élément parent spécifié qui correspond aux critères spécifiés. Dans le code fourni, le critère est "h1", mais comme le premier enfant du div est le ul, le sélecteur :first-child ne s'applique pas à l'élément h1.

Solution alternative utilisant :first-of-type

CSS3 introduit le sélecteur :first-of-type, qui sélectionne la première occurrence d'un type d'élément au sein de son parent. Dans ce scénario, remplacer :first-child par :first-of-type résoudrait le problème :

.detail_container h1:first-of-type {
  color: blue;
}

Considérations sur la compatibilité du navigateur

Cependant, :first- of-type a une compatibilité de navigateur limitée par rapport à :first-child.

Solution recommandée utilisant Classe

Une solution plus pratique et compatible avec tous les navigateurs consiste à attribuer une classe à l'élément h1 ciblé et à le styliser en conséquence :

.detail_container h1.first {
  color: blue;
}

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!