Comment isoler un Div de l'influence CSS globale : en utilisant `all: initial` et `all: unset`

Comment mettre en quarantaine un Div de l'influence CSS globale

Dans le code HTML fourni, nous avons un élément div avec l'ID "mydiv" imbriqué dans un corps. Lors de l'application de styles CSS à des éléments tels que des images et des titres, nous souhaiterons peut-être exclure les éléments de "mydiv" de ces styles publics.

Contrôle en cascade et héritage CSS

Niveau en cascade et héritage CSS 3 a introduit la propriété raccourcie all et le mot-clé unset, nous permettant de restreindre l'héritage et d'isoler des éléments spécifiques. En définissant all: initial sur un élément, nous bloquons efficacement tout héritage et réinitialisons toutes les propriétés à leurs valeurs initiales. Cela revient à commencer par une table rase, en ignorant les styles hérités des éléments parents.

Isoler "mydiv" avec all: initial

Pour empêcher les styles hérités d'affecter les éléments de "mydiv", nous appliquons all: initial au div et all: unset à ses descendants :

<code class="css">#mydiv {
  all: initial; /* Blocks inheritance for all properties */
}

#mydiv * {
  all: unset; /* Allows inheritance within #mydiv */
}</code>

Réinitialisation complète des propriétés

Alternativement, pour garantir compatibilité entre différents navigateurs, nous pouvons définir manuellement toutes les propriétés CSS connues (y compris les versions avec préfixe du fournisseur) à leurs valeurs initiales :

<code class="css">#mydiv {
  /*
   * Using initial for all properties
   * to completely block inheritance
   */
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...
  background: initial;
  ...
}

#mydiv::before,
#mydiv::after,
#mydiv *,
#mydiv *::before,
#mydiv *::after {
  /*
   * Using inherit for normally heritable properties,
   * and initial for the others, similar to unset
   */
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...
  color: inherit;
  ...
}</code>

En tirant parti de ces techniques, nous pouvons empêcher avec succès les éléments de "mydiv" d'hériter et être affecté par les styles CSS globaux, les isolant ainsi dans leur propre environnement de style encapsulé.

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!