Elementi di destinazione con più classi, all'interno di una regola

Question

Ho un codice HTML che avrebbe elementi con più classi e ho bisogno di assegnarli all'interno di una regola, in modo che le stesse classi possano essere diverse all'interno di contenitori diversi. Dire che ho questo nel mio CSS:

.border-blue { 
    border: 1px solid blue; 
} 
.background { 
    background: url(bg.gif); 
} 

allora ho questo nel mio HTML:

<div class='border-blue background'>Lorum Crap No-one Cares About Ipsum</div> 

Posso indirizzare questi all'interno di una singola regola? In questo modo, per esempio, che so non funziona:

.border-blue, .background { 
    border: 1px solid blue; 
    background: url(bg.gif); 
} 

Answer 1

.border-blue.background { ... } è per un oggetto con più classi.
.border-blue, .background { ... } è per più articoli ciascuno con la propria classe.
.border-blue .background { ... } è per un articolo in cui ".background" è figlio di ".border-blue".

Vedere Chris' answer per una spiegazione più approfondita.

Answer 2

Nel caso in cui qualcuno si imbatta in questo come ho fatto e non si rende conto, le due varianti sopra sono per diversi casi d'uso.

la seguente:

.blue-border, .background { 
    border: 1px solid #00f; 
    background: #fff; 
} 

è per quando si desidera aggiungere stili per gli elementi che hanno o il blu-bordo o classe di sfondo, ad esempio:

<div class="blue-border">Hello</div> 
<div class="background">World</div> 
<div class="blue-border background">!</div> 

sarebbero tutti ottenere un blu bordo e sfondo bianco applicato a loro.

Tuttavia, la risposta accettata è diversa.

.blue-border.background { 
    border: 1px solid #00f; 
    background: #fff; 
} 

Ciò vale gli stili di elementi che hanno entrambe le classi in modo da, in questo esempio solo il <div> con entrambe le classi dovrebbero ottenere gli stili applicati (nei browser che interpretano il CSS correttamente):

<div class="blue-border">Hello</div> 
<div class="background">World</div> 
<div class="blue-border background">!</div> 

Così basti pensare in questo modo, la separazione delle virgole si applica agli elementi con una classe O un'altra classe e la separazione punti si applica agli elementi con una classe E un'altra classe.