Elementy docelowe z wieloma klasami, w ramach jednej reguły

Question

Mam trochę kodu HTML, który zawierałby elementy z wieloma klasami i muszę je przypisać w ramach jednej reguły, aby te same klasy mogły być różne w różnych kontenerach. Że mam to w moim CSS:

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

Potem mam to w moim HTML:

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

Czy mogę kierować je w ramach jednej reguły? Tak, na przykład, co wiem, nie działa:

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

Answer 1

.border-blue.background { ... } jest dla jednej pozycji z wieloma klasami.
.border-blue, .background { ... } jest dla wielu przedmiotów, każdy z własną klasą.
.border-blue .background { ... } dotyczy jednego elementu, w którym ".background" jest dzieckiem ".border-blue".

Aby uzyskać bardziej szczegółowe wyjaśnienie, patrz: Chris' answer.

Answer 2

Na wypadek, gdyby ktoś potknął się o to tak jak ja i nie zdaję sobie sprawy, dwie powyższe wersje są dla różnych przypadków użycia.

Poniższy:

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

jest, gdy chcemy dodać style do elementów, które mają albo niebiesko-granicy lub klasy w tle, na przykład:

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

by wszystko dostać niebieski obramowane i białe tło zastosowane do nich.

Jednak zaakceptowana odpowiedź jest inna.

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

Dotyczy style do elementów, które posiadają zarówno zajęcia więc w tym przykładzie tylko <div> z obu klas powinien dostać style zastosowane (w przeglądarkach, które interpretują CSS prawidłowo):

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

Tak w zasadzie myśl o tym w ten sposób, oddzielanie przecinkami dotyczy elementów z jedną klasą LUB inną klasą, a separacja kropek dotyczy elementów z jedną klasą I inną klasą.