elementos de objetivo con múltiples clases, dentro de una regla

Question

que tienen algo de HTML que tendría elementos con múltiples clases, y yo tenemos que asignarlos dentro de una regla, de modo que las mismas clases podrían ser diferentes en diferentes contenedores. Decir que tengo esto en mi CSS:

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

entonces tengo esto en mi HTML:

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

¿Puedo orientar estas dentro de una única regla? Así, por ejemplo, que sé que no funciona:

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

Answer 1

.border-blue.background { ... } es para un artículo con varias clases.
.border-blue, .background { ... } es para varios elementos, cada uno con su propia clase.
.border-blue .background { ... } es para un artículo en '.background' es el hijo de '.border-azul'.

Ver Chris' answer para una explicación más detallada.

Answer 2

Por si alguien tropieza con esto como lo hice y no se da cuenta, las dos variantes anteriores son para diferentes casos de uso.

la siguiente:

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

es para cuando se desea añadir estilos a elementos que tienen la tendencia al azul-frontera o clase de fondo, por ejemplo:

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

sería todo conseguir un azul frontera y fondo blanco aplicado a ellos.

Sin embargo, la respuesta aceptada es diferente.

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

Esto se aplica a los estilos de elementos que tienen ambas clases por lo que en este ejemplo sólo el <div> con ambas clases deben recibir los estilos aplicados (en los navegadores que interpretan el CSS correctamente):

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

Así básicamente pensar en ello como esto, coma de separación se aplica a los elementos con una clase u otra clase y el punto de separación se aplica a los elementos con una clase y otra clase.