Comment empêcher les styles CSS publics d'affecter le contenu des divisions : comment fonctionne \'all: initial\' ?

Comment empêcher les styles CSS publics d'affecter le contenu Div

Dans le code HTML, les balises div sont couramment utilisées pour regrouper des éléments à des fins de style. Cependant, il est parfois nécessaire d'isoler le contenu d'une balise div du style appliqué à la feuille de style CSS publique.

Héritage CSS et cascade

Les styles CSS sont hérités par les éléments enfants à partir de leurs éléments parents. Cela signifie que si une image et une balise de titre sont toutes deux à l'intérieur d'une balise div, elles hériteront des propriétés CSS appliquées à la balise div, sauf cas particuliers.

Blocage de l'héritage avec 'all: initial '

Pour éviter que le contenu d'une balise div ne soit affecté par les styles CSS publics, vous pouvez utiliser la propriété CSS 'all: initial'. Cette propriété réinitialise toutes les propriétés CSS héritées et définies à leurs valeurs initiales.

Exemple de code

Pour isoler le contenu div dans le code HTML donné, le CSS suivant peut être utilisé :

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

Autoriser l'héritage dans la balise Div

Alors que « all: initial » bloque l'héritage, il est possible de l'autoriser dans la balise div elle-même. Pour ce faire, vous pouvez utiliser la propriété 'all:unset' sur les éléments descendants de la balise div :

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

Support du navigateur

Le 'all' La propriété raccourcie est largement prise en charge dans les navigateurs modernes, notamment Chrome, Firefox, Safari et Edge. Pour une prise en charge plus large, vous pouvez utiliser la version plus longue, qui implique de définir chaque propriété CSS à sa valeur initiale :

<code class="css">#mydiv {
  /* ... (set all CSS properties to 'initial') ... */
}</code>

Conclusion

En utilisant 'all: initial ' pour bloquer l'héritage et ' all: unset ' pour l'autoriser au sein du div, il est possible d'isoler le contenu d'une balise div de la feuille de style CSS publique. Cette technique est particulièrement utile pour créer des widgets ou des composants autonomes.

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!