Comment pouvez-vous isoler un conteneur « div » des styles CSS publics et empêcher ses enfants d'hériter des styles globaux ?

Linda Hamilton

Libérer： 2024-10-26 04:19:03

original

448 Les gens l'ont consulté

How can you isolate a `div` container from public CSS styles and prevent its children from inheriting global styles?

Isoler un div des styles CSS publics

Problème

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>

Copier après la connexion

Application de ce qui suit Feuille de style CSS :

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

Copier après la connexion

La question se pose : comment empêcher le style défini pour tous les et

balises d'affecter les éléments du conteneur #mydiv ?

Solution

Pour isoler les éléments de #mydiv des styles CSS globaux, nous pouvons exploiter la propriété all shorthand et le mot-clé unset introduit dans Cascade CSS et niveau d'héritage 3.

En définissant all: initial sur #mydiv, nous bloquons l'héritage pour toutes les propriétés et les réinitialisons à leurs valeurs par défaut. Cela empêche les styles globaux de se répercuter en cascade dans le conteneur.

Pour permettre l'héritage dans #mydiv, nous pouvons définir all: unset sur ses descendants. Ce faisant, nous permettons aux règles définies dans le conteneur de prendre effet sans interférence des styles externes.

Voici le code CSS révisé :

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

Copier après la connexion

Il est important de noter que cette technique s'applique à toutes les propriétés CSS possibles, y compris les propriétés préfixées par le fournisseur. Pour garantir une large prise en charge du navigateur, il est recommandé de cibler également les pseudo-éléments :

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

Copier après la connexion

Approche alternative

Alternativement, pour une compatibilité plus large avec le navigateur, vous pouvez définir manuellement chaque propriété CSS sur sa valeur initiale valeur sur #mydiv et hériter de ses descendants, comme le montre le code suivant :

<code class="css">#mydiv {
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...

  color: inherit;
  ...
}

#mydiv::before,
#mydiv::after,
#mydiv *,
#mydiv *::before,
#mydiv *::after {
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...

  color: inherit;
  ...
}</code>

Copier après la connexion