contenuti Append tramite diversi CSS: dopo le lezioni

Question

Dato il seguente codice HTML:

<div class="required">required only</div> 
<div class="note">note only</div> 
<div class="required note">required and note</div> 
<div class="note required">note and required</div> 

e CSS:

.required:after { content: " *"; color: red; } 
.note:after { content: " +"; color: red; } 

Il risultato in Firefox 11 è:

required only * 
note only + 
required and note + 
note and required + 

Dove più di viene fornita una classe (.required e .note) Mi piacerebbe che "*" e "+" siano aggiunti all'elemento in modo tale che:

required and note *+ 
note and required +* 

È possibile utilizzare puro CSS e, in caso affermativo, come?

Edit: Ecco un link per jsfiddle per questo esempio: http://jsfiddle.net/xpZST/

Answer 1

Avrete bisogno di regole aggiuntive per far funzionare tutto questo.

Dato che l'ordinamento delle classi di questioni (quando normalmente non dovrebbe!), Avrete bisogno di utilizzare selettori di attributo invece di selettori di classe, ed è necessario creare due regole:

[class="required note"]:after { content: " *+"; color: red; } 
[class="note required"]:after { content: " +*"; color: red; } 

Basta aggiungere queste regole dopo quelle che hai e dovrebbe funzionare, in quanto attributo e selettori di classe sono ugualmente specifici.

A proposito, se si dispone di stili comuni è possibile mantenere il vostro codice DRY isolandoli in un'altra regola. Ad esempio, è possibile selezionare ogni classe e dare loro sia color: red:

.required:after, .note:after { color: red; } 

jsFiddle preview