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

117

У меня есть 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);
}
Таннер Оттингер
источник

Ответы:

182

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

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

Виан Эстерхайзен
источник
2
Спасибо! Я не знал, возможно ли это, поэтому я просил здесь узнать.
Tanner Ottinger
У меня это решение не работает (или больше не работает ...).
fresko
вам нужно разделять классы запятыми, как говорит ответ Криса
fresko
что ты имеешь в виду, .border-blue .background { ... }ребенок? я пробовал это, и это не работает
Элиав Луски
174

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

Последующий:

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

предназначен для случаев, когда вы хотите добавить стили к элементам, которые имеют класс blue-border или background, например:

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

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

Крис Грэм
источник
12
Это был очень полезный ответ, который я почти не читал. Ура!
psicopoo
1
Просто будь осторожен. Нет пробелов в.blue-border.background
Knu8
2
think of it as AND and OR: Отличный совет. Могу добавить, что это .x .yможно представить какy && ancestors.has(x)
Сиддхарт