Comment puis-je isoler un div des styles CSS publics en HTML ?

Isoler un div des styles CSS publics

En HTML, la cascade et l'héritage CSS peuvent parfois affecter des éléments d'un div qui ne sont pas destinés à être stylisé par les règles CSS publiques. Cela peut entraîner des problèmes de formatage inattendus. Pour résoudre ce problème, CSS Cascading and Inheritance Level 3 a introduit la propriété all shorthand et le mot-clé unset.

Utilisation des mots-clés all et unset

Pour empêcher les balises à l'intérieur d'un div Pour éviter d'être affecté par les styles publics, vous pouvez définir all: initial sur le div et all: unset sur ses descendants. Cela bloquera l'héritage pour toutes les propriétés du div et permettra l'héritage au sein du div lui-même.

Exemple

Considérez le code HTML suivant :

<code class="html"><div id='mydiv'>
  <img src='an image source' />
  <h1>Hi it's test</h1>
</div></code>

Et le CSS suivant :

<code class="css">img {
  width:100px;
  height:100px;
}
h1 {
  font-size:26px;
  color:red;
}</code>

Sans isoler le div, l'image et le titre à l'intérieur du div hériteraient des styles publics. Pour l'isoler, appliquez le CSS suivant :

<code class="css">#mydiv {
  all: initial;
}
#mydiv * {
  all: unset;
}</code>

Cela empêchera tous les styles publics d'affecter les éléments du div #mydiv tout en leur permettant d'hériter des styles définis dans le div lui-même.

Support multi-navigateurs

La propriété all est prise en charge dans la plupart des navigateurs modernes. Pour les navigateurs plus anciens, vous pouvez spécifier manuellement initial pour toutes les propriétés CSS afin d'obtenir des résultats similaires. Notez cependant que cette méthode est moins efficace que l’utilisation de la propriété all.

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!