У меня есть 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);
}
.border-blue.background { ... } для одного элемента с несколькими классами. .border-blue, .background { ... } для нескольких элементов, каждый со своим классом. .border-blue .background { ... } предназначен для одного элемента, где '.background' является дочерним элементом '.border-blue'.
См. ответ Криса для более подробного объяснения.
На всякий случай кто-то натыкается на это, как я это делал и не понимаю, два варианта выше для разных вариантов использования.
Следующее:
.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>
Итак, в основном, думайте об этом так, разделение запятой применяется к элементам с одним классом ИЛИ другой класс и разделение точечных применяется к элементам с одним классом И другим классом.