Héritage du style CSS

Question

Disons que je veux définir 2 styles.

.color_red { color: Red; } 
.banner { display: block; width: 100%; } 

Y a-t-il un moyen pour que le style h1 hérite du style color_red? Je ne veux pas avoir à faire

<div class="banner color_red">This is my banner.</div> 

Je préfère faire quelque chose comme ça ...

.banner { ... inherit: color_red; } 
... 
<div class="banner">This is my banner.</div> 

et ont la bannière ont rouge.

Answer 1

Vous devez écrire:

 
.color_red, .banner { color: Red; } 
.banner { display: block; width: 100%; } 

Answer 2

Non, il n'y a aucun moyen de le faire directement, mieux partager les définitions de style:

.color_red, 
.banner 
{ 
    color: red; 
} 

Cependant, je voudrais souligner que vous approchez le problème de la mauvaise direction. Votre mark-up devrait être indépendant du style et devrait idéalement conduire le style en développement. Cela signifie que la définition de .color_red est un problème sérieux, car il ne dit rien sur la sémantique du balisage et à quel point êtes-vous confronté à un problème si vous devez styliser ce bit de balisage bleu?

Il vaut beaucoup mieux pour permettre à votre marge d'exister comme ceci:

<div class="banner highlight">I am a banner AND I am highlighted!</div> 

soutenu par:

<style> 
.highlight 
{ 
    color: red; 
} 

.banner 
{ 
    display: block; 
    width: 100%; 
} 
</style>