Comment empêcher l’inheritance CSS?

J’ai un menu de navigation hiérarchique dans ma barre latérale qui utilise des listes nestedes (balises

    et

  • ). J’utilise un thème prédéfini qui a déjà des styles pour les éléments de liste, mais je veux modifier le style pour les éléments de niveau supérieur, mais il ne doit PAS s’appliquer aux sous-éléments. Existe-t-il un moyen simple d’appliquer des styles à la balise d’élément de liste de niveau supérieur SANS que ces styles ne tombent en cascade sur ses éléments de liste d’enfants? Je comprends que je peux explicitement append des styles de substitution aux sous-éléments, mais je voudrais vraiment éviter d’avoir à dupliquer tout ce code de style s’il y a un moyen facile de dire “appliquer ces styles à cette classe eux à tous les éléments enfants “. Voici le code HTML que j’utilise:

     

    Donc, le css a des styles pour “#sidebar ul” et “#sidebar ul li” déjà, mais je voudrais append des styles supplémentaires à “#sidebar .top-level-nav” qui ne se répercuteront pas sur ses sous-enfants. Est-il possible de le faire simplement ou dois-je réorganiser tous les styles pour que les styles qui se trouvent sur “#sidebar ul” soient maintenant spécifiques à certaines classes.

    Il n’existe pas encore de sélecteur parent (ou, comme Shaun Inman les appelle, sélecteurs qualifiés ), vous devrez donc appliquer des styles aux éléments de la liste enfant pour remplacer les styles des éléments de la liste parent.

    La mise en cascade est en quelque sorte le point essentiel des feuilles de style en cascade, d’où le nom.

  • Vous utilisez soit le sélecteur d’enfants

    Donc en utilisant

     #parent > child 

    Ne fera que les enfants de premier niveau avoir les styles appliqués. Malheureusement, IE6 ne supporte pas le sélecteur d’enfants.

    Sinon, vous pouvez utiliser

     #parent child child 

    Pour définir un autre style spécifique pour les enfants de plus d’un niveau.

    Il y a une propriété appelée all dans le module d’inheritance CSS3 . Cela fonctionne comme ceci:

     #sidebar ul li { all: initial; } 

    Depuis 2016-12, tous les navigateurs, à savoir IE / Edge et Opera Mini, prennent en charge cette propriété.

    Vous pouvez utiliser le sélecteur * pour rétablir les styles enfant par défaut

    Exemple

     #parent { white-space: pre-wrap; } #parent * { white-space: initial; } 

    Envelopper avec iframe rend obsolète le css parent.

    La réponse courte est: Non, il n’est pas possible d’empêcher l’inheritance CSS. Vous ne pouvez remplacer que les styles définis sur les parents. Voir la spécification:

    Chaque élément d’un document HTML héritera de toutes les propriétés héritées de son parent, à l’exception de l’élément racine ( html ), qui n’a pas de parent. – W3C

    En plus de remplacer chaque propriété héritée. Vous pouvez également utiliser initial mot-clé initial , par exemple la color: initial; . Il peut également être utilisé avec all , par exemple all: initial; , cela réinitialisera toutes les propriétés à la fois. Exemple:

     .container { color: blue; font-style: italic; } .initial { all: initial; } 
     
    The quick brown fox jumps over the lazy dog

    Vous pourriez utiliser quelque chose comme jQuery pour “désactiver” ce comportement, bien que je pense à peine que ce soit une bonne solution car vous obtenez une logique d’affichage dans css & javascript. Cependant, en fonction de vos besoins, vous trouverez peut-être que les utilitaires CSS de jQuery vous simplifient la vie plutôt que d’essayer le hacky css, surtout si vous essayez de le faire fonctionner avec IE6.

    Par exemple, si vous avez deux div dans un document XHTML.

     

    hello, how are you?

    I am fine, thank you.

    Ensuite, essayez ceci en CSS.

     #div1 > #div2 > p{ color: red; } 

    n’affecte que le paragraphe ‘div2’.

     #div1 > p { color: red; } 

    n’affecte que le paragraphe ‘div1’.

    Vous n’avez pas besoin de la référence de classe pour les li s. Au lieu d’avoir CSS comme

     li.top-level-nav { color:black; } 

    tu peux écrire

     ul#sidebar > li { color:black; } 

    Cela appliquera le style uniquement aux li qui descendent immédiatement de la barre latérale ul .

    il suffit de les remettre à leurs valeurs par défaut dans le sélecteur “#sidebar ul li”