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

複数のクラスを持つ要素を持ついくつかの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);
}

.border-blue.background { ... }複数のクラスを持つ1つのアイテム用です。
.border-blue, .background { ... }それぞれが独自のクラスを持つ複数のアイテム用です。
.border-blue .background { ... }「.background」が「.border-blue」の子である1つのアイテム用です。

詳細な説明については、Chrisの回答を参照してください。

私がしたように誰かがこれにつまずいて気づかなかった場合に備えて、上記の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>

したがって、基本的にはこのように考えると、カンマ区切りは1つのクラスまたは別のクラスの要素に適用され、ドット区切りは1つのクラスおよび別のクラスの要素に適用されます。