Ereditarietà stile CSS

Question

Diciamo che voglio definire 2 stili.

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

C'è un modo in cui posso avere lo stile h1 ereditare lo stile color_red? Io non voglio avere a che fare

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

Preferirei fare qualcosa di simile ...

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

E avere la bandiera hanno testo rosso.

Answer 1

dovete scrivere:

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

Answer 2

No, non c'è modo di farlo direttamente, meglio condividere le definizioni di stile:

.color_red, 
.banner 
{ 
    color: red; 
} 

Tuttavia vorrei sottolineare che si stiamo avvicinando il problema dalla direzione sbagliata. Il tuo mark-up dovrebbe essere indipendente dallo stile e dovrebbe condurre idealmente lo stile in sviluppo. Ciò significa che la definizione di .color_red è un problema serio, perché non dice nulla sulla semantica del mark-up e su quanti problemi hai dovuto affrontare se hai bisogno di ridimensionare quel bit di mark-up blu?

Molto meglio per consentire al mark-up di esistere in questo modo:

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

supportata da:

<style> 
.highlight 
{ 
    color: red; 
} 

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

non