Comment empêcher l'héritage d'éléments enfants en CSS ?

Prévenir l'héritage des éléments enfants en CSS

Dans le domaine CSS, l'héritage joue un rôle crucial dans la définition des styles des éléments enfants en fonction de ceux de leur parent. Cependant, il peut y avoir des situations dans lesquelles vous souhaitez remplacer cet héritage et personnaliser les styles des éléments enfants de manière indépendante.

Problème d'héritage

Considérez la structure HTML suivante :

<div>

Avec ce CSS :

form div {font-size: 12px; font-weight: bold;}

Normalement, les blocs de texte "Contenu du paragraphe" et "Contenu de l'étendue" seraient héritent de la taille et du poids de la police de leur formulaire parent.

Prévention de l'héritage

Réversion manuelle du style :

Une méthode pour remplacer l'héritage consiste à annuler manuellement le changements de style sur l'élément enfant :

div {color: green;}

form div {color: red;}

form div div.content {color: green;}

Ajout de plusieurs Classes :

Si vous contrôlez le balisage, vous pouvez ajouter des classes supplémentaires pour cibler des éléments spécifiques :

form div.sub {color: red;}

form div div.content {/* Remains green */}

Solution future : restaurer la propriété

Le Le groupe de travail CSS explore actuellement la propriété revert :

div.content {
  all: revert;
}

Cette propriété vous permettrait de réinitialiser explicitement tous les styles hérités sur un élément enfant. Depuis avril 2023, la plupart des navigateurs modernes (à l'exception de Safari et Internet Explorer/Edge) prennent en charge la propriété revert.

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!