Целевые элементы с несколькими классами, в пределах одного правила

У меня есть 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);
}

Ответ 1

.border-blue.background { ... } для одного элемента с несколькими классами.
.border-blue, .background { ... } для нескольких элементов, каждый со своим классом.
.border-blue .background { ... } предназначен для одного элемента, где '.background' является дочерним элементом '.border-blue'.

См. ответ Криса для более подробного объяснения.

Ответ 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>

Итак, в основном, думайте об этом так, разделение запятой применяется к элементам с одним классом ИЛИ другой класс и разделение точечных применяется к элементам с одним классом И другим классом.