1つのルール内に複数のクラスを持つターゲット要素

Question

複数のクラスを持つ要素を持つHTMLがあり、同じクラスが異なるコンテナ内で異なるように、1つのルール内にそれらを割り当てる必要があります。私は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'の子である1つのアイテム用です。

さらに詳しい説明はChris' answerを参照してください。

Answer 2

上記の2つのバリエーションは、使用方法が異なるためです。

次

<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; 
} 

があります境界線と白い背景が適用されます。

ただし、受け入れられる回答は異なります。

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

この

は、両方のクラスを持つ要素にスタイルを適用し、この例ではこれだけ（適切にCSS解釈のブラウザで）適用されるスタイルを取得する必要があり、両方のクラスと <div>：だから

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

を基本的にはこのように考えると、コンマ区切りは、クラスまたは別のクラスの要素に適用され、ドット区切りは、クラスと別のクラスの要素に適用されます。