Comment empêcher l'héritage CSS?

J'ai un menu de navigation hiérarchique dans ma barre latérale qui utilise des listes imbriquées (balises <ul> et <li>). J'utilise un thème prédéfini qui a déjà des styles pour les éléments de liste, mais je souhaite modifier le style des éléments de niveau supérieur mais PAS l'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 avoir ces styles en cascade jusqu'à ses éléments de liste enfants? Je comprends que je peux explicitement ajouter des styles de remplacement aux sous-éléments, mais j'aimerais vraiment éviter d'avoir à dupliquer tout ce code de style s'il existe un moyen simple de dire simplement "appliquer ces styles à cette classe et NE PAS cascade les jusqu'à tous les éléments enfants ". Voici le html que j'utilise:

<ul id="sidebar">
  <li class="top-level-nav">
    <span>HEADING 1</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
  <li class="top-level-nav">
    <span>HEADING 2</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
</ul>

Donc, le CSS a des styles pour #sidebar ulet #sidebar ul lidéjà, mais j'aimerais ajouter des styles supplémentaires #sidebar .top-level-navqui ne se répercutent PAS sur ses sous-enfants. Existe-t-il un moyen de le faire simplement ou dois-je réorganiser tous les styles pour que les styles qui étaient activés #sidebar ulsoient désormais spécifiques à certaines classes?

Pour le moment, il n'y a pas de sélecteurs parents (ou comme Shaun Inman les appelle, des sélecteurs qualifiés ), vous devrez donc appliquer des styles aux éléments de la liste enfant pour remplacer les styles sur les éléments de la liste parent.

La cascade est en quelque sorte le but des feuilles de style en cascade, d'où le nom.

Soit vous utilisez le sélecteur d'enfant

Donc en utilisant

#parent > child

Ne fera appliquer que les enfants de premier niveau aux styles. Malheureusement, IE6 ne prend pas en charge le sélecteur d'enfant.

Sinon, vous pouvez utiliser

#parent child child

Pour définir un autre style spécifique pour les enfants qui sont plus d'un niveau en dessous.

Il existe une propriété appelée alldans le module d'héritage CSS3 . Cela fonctionne comme ceci:

#sidebar ul li {
  all: initial;
}

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

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

exemple

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

#parent * {
    white-space: initial;
}

L'emballage avec iframe rend le css parent obsolète.

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

Chaque élément d'un document HTML héritera de toutes les propriétés héritables 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 des initialmots clés, par exemple color: initial;. Il peut également être utilisé avec all, par exemple all: initial;, qui réinitialisera toutes les propriétés à la fois. Exemple:

.container {
  color: blue;
  font-style: italic;
}
.initial {
  all: initial;
}

<div class="container">
  The quick brown <span class="initial">fox</span> jumps over the lazy dog
</div>

Tableaux de support du navigateur selon Puis-je utiliser ...

• all (Actuellement pas de support à la fois dans IE et Edge, les autres sont bons)
• initial (Actuellement aucun support dans IE, d'autres sont bons)

Vous pouvez le trouver utile en utilisant le sélecteur d'enfants direct> dans certains cas. Exemple:

.list > li {
  border: 1px solid red;
  color: blue;
}

<ul class="list">
  <li>
    <span>HEADING 1</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
  <li>
    <span>HEADING 2</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
</ul>

Le style de bordure a été appliqué uniquement aux enfants directs <li>, tout comme borderune propriété non héritée. Mais la couleur du texte a été appliquée à tous les enfants, tout comme colorune propriété héritée.

Par conséquent, le >sélecteur ne serait utile qu'avec les propriétés non héritées, lorsqu'il s'agit d'empêcher l'héritage.

Vous pouvez utiliser quelque chose comme jQuery pour "désactiver" ce comportement, bien que je ne pense pas que ce soit une bonne solution car vous obtenez une logique d'affichage en css et javascript. Néanmoins, en fonction de vos besoins, vous constaterez peut-être que les utilitaires css de jQuery vous facilitent la vie que d'essayer de pirater css, surtout si vous essayez de le faire fonctionner pour IE6

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

<div id='div1'>
    <p>hello, how are you?</p>
    <div id='div2'>
        <p>I am fine, thank you.</p>
    </div>
</div>

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 le lis. 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 lis 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"