Why Doesn't `:first-child` Select the First `` in a ``?

Interprétation incorrecte des sélecteurs CSS

Lors de la tentative de style du premier

élément dans un

avec le nom de classe detail_container, vous risquez de rencontrer des résultats inattendus. Ce problème est dû à une mauvaise compréhension du fonctionnement du sélecteur :first-child.

Le CSS que vous avez implémenté tente de sélectionner le premier

élément qui est également le premier enfant du detail_container

. Cependant, si le premier élément de ce

est un

, même s'il s'agit du premier

dans le

Utilisation correcte du sélecteur CSS

Pour sélectionner le premier

, quelle que soit sa position dans le détail_container

, vous devez plutôt utiliser le sélecteur :first-of-type. Ce sélecteur sélectionnera le premier

qui est un enfant direct de l'élément parent spécifié.

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

Copier après la connexion

Alternativement, pour une plus grande compatibilité avec les navigateurs, vous pouvez attribuer une classe au premier

et ciblez cette classe dans votre CSS.

.detail_container h1.first {
  color: blue;
}

Copier après la connexion

En comprenant les nuances des sélecteurs CSS, vous pouvez vous assurer que vos règles de style ciblent avec précision les éléments souhaités.

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!

source：php.cn

Article précédent：Comment puis-je styliser de manière fiable des champs de saisie vides avec CSS ? Article suivant：Comment puis-je styliser les boutons désactivés avec CSS ?

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2184

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2331

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

1960

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...