Zielelemente mit mehreren Klassen innerhalb einer Regel

Ich habe HTML-Code mit Elementen mit mehreren Klassen, und ich muss sie innerhalb einer Regel zuweisen, damit dieselben Klassen in verschiedenen Containern unterschiedlich sein können. Angenommen, ich habe dies in meinem CSS:

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

Dann habe ich das in meinem HTML:

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

Kann ich diese innerhalb einer einzigen Regel ansprechen? So funktioniert zum Beispiel, von dem ich weiß, dass es nicht funktioniert:

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

.border-blue.background { ... }ist für einen Artikel mit mehreren Klassen.
.border-blue, .background { ... }ist für mehrere Elemente mit jeweils einer eigenen Klasse.
.border-blue .background { ... }ist für ein Element, bei dem '.background' das Kind von '.border-blue' ist.

Siehe Chris 'Antwort für eine gründlichere Erklärung.

Nur für den Fall, dass jemand wie ich darauf stößt und es nicht merkt, gelten die beiden oben genannten Varianten für unterschiedliche Anwendungsfälle.

Folgende:

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

Dies ist der Fall, wenn Sie Elementen Stile hinzufügen möchten, die entweder den blauen Rand oder die Hintergrundklasse haben, z. B.:

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

Alle würden einen blauen Rand und einen weißen Hintergrund erhalten.

Die akzeptierte Antwort ist jedoch anders.

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

Dadurch werden die Stile auf Elemente <div>angewendet , die beide Klassen haben. In diesem Beispiel sollten nur die Stile mit beiden Klassen angewendet werden (in Browsern, die das CSS richtig interpretieren):

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

Stellen Sie sich das also im Grunde so vor: Die Kommatrennung gilt für Elemente mit einer Klasse ODER einer anderen Klasse und die Punkttrennung für Elemente mit einer Klasse UND einer anderen Klasse .