Comment empêcher l'héritage CSS dans les menus imbriqués lors du style des éléments de niveau supérieur ?

Prévenir l'héritage CSS dans un menu imbriqué

Dans les menus hiérarchiques, les styles hérités des éléments parents peuvent parfois devenir problématiques. Cet article aborde le problème de la prévention de l'héritage CSS dans un menu de navigation imbriqué, en garantissant que seuls les éléments de niveau supérieur ont un style spécifique.

La structure HTML fournie utilise des listes imbriquées avec une structure hiérarchique. La question se pose de savoir comment appliquer des styles aux éléments de liste de niveau supérieur ("li" avec la classe "top-level-nav") sans affecter les sous-éléments imbriqués.

Utilisation du sélecteur d'enfants

Utilisation du sélecteur d'enfants

#parent > child

Une approche consiste à utiliser le sélecteur d'enfant (">") :

#sidebar > .top-level-nav

Dans ce scénario, cela be :

Cela garantit que les styles sont appliqués uniquement aux descendants directs de l'élément "#sidebar", ciblant efficacement uniquement les éléments de navigation de niveau supérieur. Notamment, Internet Explorer 6 ne prend pas en charge le sélecteur d'enfants.

Utilisation de plusieurs sélecteurs d'enfants

#parent child child

Vous pouvez également utiliser plusieurs sélecteurs d'enfants pour spécifier des styles pour les éléments à des profondeurs spécifiques. :

#sidebar child child

Par exemple :

Cela cible des éléments qui sont à deux niveaux au plus profond de la "#sidebar".

Éviter la duplication de code

Pour éviter la duplication de styles pour les sous-éléments, les règles existantes "#sidebar ul li" peuvent être modifiées à appliquer à tous les éléments de liste imbriqués, tandis que les styles spécifiques aux éléments de niveau supérieur peuvent être ciblés à l'aide des sélecteurs enfants mentionnés ci-dessus.

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!