Comment empêcher l'héritage CSS des éléments parents ?-tutoriel CSS-php.cn

Comment empêcher l'héritage CSS des éléments parents ?

Barbara Streisand

Libérer： 2024-11-26 06:47:12

original

530 Les gens l'ont consulté

How to Prevent CSS Inheritance from Parent Elements?

Héritage et remplacement CSS

Dans certaines circonstances, il peut être nécessaire d'empêcher un élément enfant d'hériter des styles hérités de son élément parent. Bien qu'il n'existe aucune propriété CSS spécifique pour y parvenir, il est possible d'annuler manuellement les modifications de style ou d'ajouter des classes supplémentaires pour définir un style plus spécifique.

Par exemple, considérons le code HTML et CSS suivant :

HTML :

<body>
 <div>

Copier après la connexion

CSS :

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

Copier après la connexion

Dans des circonstances normales, le texte bloque « Contenu du paragraphe » et "Contenu de l'étendue" hériterait de la taille et du poids de la police de l'élément parent "form div", ce qui ferait en sorte que les deux textes soient en gras et 12 px.

Pour éviter cet héritage et limiter le style à simplement "Contenu de le paragraphe", on peut annuler manuellement les modifications de style :

div { color: green; }

form div { color: red; }

form div div.content { color: green; }

Copier après la connexion

Alternativement, si possible, l'ajout de classes supplémentaires au balisage peut fournir des informations plus précises. style :

<form div.sub { color: red; }

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

Copier après la connexion

Les versions récentes des navigateurs modernes prennent désormais en charge la propriété « revert » pour annuler explicitement l'héritage sur des éléments spécifiques :