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

у меня есть некоторые 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);
}
2 87
css class-design target

2 ответа:

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

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

130

на всякий случай, если кто-то наткнется на это, как я сделал, и не понимает, два варианта выше предназначены для разных случаев использования.

следующее:

.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>

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

157