在一個規則中具有多個類的目標元素

Question

我有一些具有多個類的元素的HTML，我需要在一個規則內分配它們，以便相同的類在不同的容器內可以不同。說我有這在我的CSS：

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

然後，我有這在我的HTML：

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

我可以在單個規則中針對這些？與此類似，例如，我知道不工作：

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

Answer 1

.border-blue.background { ... }是與多個類一個項目。
.border-blue, .background { ... }用於多個項目，每個項目都有自己的類別。
.border-blue .background { ... }適用於其中'.background'是'.border-blue'子項的項目。

請參閱Chris' answer以獲得更全面的解釋。

Answer 2

爲了防止有人像我這樣做，沒有意識到這一點，這兩個變化是針對不同的使用情況。

以下：

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

是當你想樣式添加到要麼藍色邊框和背景類的元素，例如：

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

都會得到一個藍色邊界和白色背景適用於他們。

但是，接受的答案是不同的。

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

這適用的樣式有兩個類元素，因此在本例中只有<div>與這兩個類應該得到應用的樣式（在解釋正確的CSS瀏覽器）：

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

所以基本認爲是這樣的，逗號分隔適用於一個類別或另一個類別的元素，點分隔適用於具有一個類別和另一個類別的元素。