Comment sélectionner uniquement l'enfant direct d'un DIV à l'aide de CSS ?

Sélecteur CSS pour enfant direct

Vous souhaitez appliquer CSS au premier enfant direct d'un DIV avec la classe "section". Cependant, vous rencontrez un comportement inattendu dans lequel le style affecte plus que simplement l'élément souhaité.

Le sélecteur que vous avez utilisé est "DIV.section DIV:first-child". Ce sélecteur correspond à n'importe quel DIV qui se trouve à l'intérieur d'un DIV avec la classe « section » et qui est le premier enfant de son parent. Cependant, dans votre HTML, le DIV "sub contents 1" est à l'intérieur d'un autre DIV qui est le premier enfant du DIV "section", d'où l'application inattendue du style.

Pour résoudre ce problème, vous pouvez utiliser un sélecteur plus précis :

Pour les deux enfants du DIV principal :

div.section > div

Ce sélecteur utilise le ">" symbole, qui sélectionne les éléments qui sont des enfants directs du parent spécifié. Dans ce cas, il ne fera correspondre que les deux DIV qui sont des enfants directs de la DIV "section".

Pour uniquement l'en-tête :

div.section > div:first-child

Ce sélecteur combine la précédente avec la pseudo-classe ":first-child", garantissant que seul le premier enfant direct de la DIV "section" est sélectionné. Cela ciblera exclusivement la DIV "en-tête".

Notez que le ">" Le symbole est pris en charge par tous les principaux navigateurs à l'exception d'IE6. Si la prise en charge d'IE6 est cruciale, vous devrez peut-être utiliser une approche alternative, comme ajouter des classes aux DIV enfants et les styliser directement.

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!