Pouvez-vous empêcher les styles CSS d'hériter des éléments parents ?

Empêcher les éléments enfants d'hériter des styles parents dans CSS

Problème :

Y a-t-il un Comment empêcher les propriétés CSS déclarées sur les éléments parents d'être héritées par leurs éléments enfants ? Par exemple, si un élément parent a une taille de police de 12 px, pouvez-vous empêcher ses éléments enfants d'hériter de ce style ?

Réponse :

Malheureusement, il existe pas de propriété CSS simple qui vous permet d'empêcher l'héritage des éléments parents. Cependant, plusieurs solutions de contournement peuvent être mises en œuvre :

1. Annuler manuellement les modifications de style :

   Vous pouvez remplacer le style hérité en définissant explicitement le style souhaité sur l’élément enfant. Par exemple :

   div { color: green; }
   
   form div { color: red; }
   
   form div div.content { color: green; }

2. Ajouter plusieurs classes au balisage :

   Si vous avez accès au balisage HTML, vous pouvez ajouter plusieurs classes à un élément pour cibler un style spécifique. Cela vous permet de remplacer les styles des classes héritées :

   form div.sub { color: red; }
   
   form div div.content { /* remains green */ }

3. Utilisez la propriété all: revert (expérimentale) :

   Groupe de travail CSS a proposé la propriété all: revert, qui réinitialise tous les styles d'un élément à leurs valeurs initiales. Cela peut être utilisé pour empêcher l'héritage des éléments parents :

   div.content {
     all: revert;
   }

   Notez que cette propriété est encore expérimentale et peut ne pas être prise en charge par tous les navigateurs.

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!