Pourquoi « DIV.section DIV:first-child » ne stylise-t-il pas uniquement le premier enfant direct ?

Spécificité du sélecteur enfant direct

Lors de l'application de CSS aux éléments HTML, il est crucial de comprendre la spécificité des sélecteurs. Dans votre scénario, le sélecteur DIV.section DIV:first-child semble styliser à la fois les divs "sous-contenu 1" et "en-tête".

Cependant, le sélecteur est destiné à correspondre uniquement au premier enfant direct. d'un div avec la classe "section". Voyons pourquoi le sélecteur d'origine ne fonctionne pas comme prévu.

Comprendre le descendant direct par rapport à l'enfant direct

La pseudo-classe :first-child sélectionne le premier enfant d'un élément. Cependant, dans votre cas, vous l'appliquez à DIV.section DIV, ce qui signifie "sélectionner tous les div qui descendent d'un div avec la classe 'section'". Cela inclut à la fois les enfants directs et les enfants imbriqués.

Utilisation du sélecteur de descendant direct

Pour cibler uniquement le premier enfant direct d'un div avec la classe "section", vous doit utiliser le sélecteur de descendant direct (>). Cet opérateur correspond aux éléments qui sont les enfants immédiats d'un parent spécifique. Le sélecteur modifié serait :

div.section > div:first-child

Ce sélecteur stylisera correctement uniquement le div "en-tête", car il s'agit du premier enfant immédiat du div avec la classe "section".

Problème de navigateur hérité

Notez que le sélecteur de descendant direct n'est pas pris en charge dans les navigateurs plus anciens, tels qu'Internet Explorer 6. Si vous Si vous devez prendre en charge de tels navigateurs, vous devrez peut-être utiliser des méthodes alternatives, telles que l'ajout de classes aux div enfants.

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!