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

Empêcher les éléments enfants d'hériter du CSS parent

Enquête originale

Le CSS peut-il être modifié pour empêcher l'héritage des styles de éléments parents aux éléments enfants ?

Réponse complète

Malheureusement, il n'existe pas de propriété CSS simple qui puisse empêcher les éléments enfants d'hériter des styles de leurs parents. La propriété hériter vous permet de copier des valeurs des éléments parents vers les éléments enfants, mais il n'y a pas d'équivalent pour la direction opposée.

Solutions alternatives

Pour remplacer les styles hérités, vous devez les rétablir manuellement dans le code CSS :

div {
  color: green;
}

form div {
  color: red;
}

form div div.content {
  color: green;
}

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

form div.sub {
  color: red;
}

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

Possibilités futures

Le groupe de travail CSS explore une solution à ce problème. La propriété proposée, revert, vous permettrait de réinitialiser les styles hérités et de revenir au style calculé de l'élément :

div.content {
  all: revert;
}

Depuis mars 2015, cette propriété a été implémentée dans tous les principaux navigateurs à l'exception de Safari et IE/. Bord. Cependant, le nom de la propriété a depuis été modifié pour revenir.

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!