У меня есть 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 { ... }
ребенок? я пробовал это, и это не работаетНа всякий случай, если кто-то наткнется на это, как я, и не осознает, два приведенных выше варианта предназначены для разных случаев использования.
Последующий:
предназначен для случаев, когда вы хотите добавить стили к элементам, которые имеют класс blue-border или background, например:
все они получат синюю рамку и белый фон.
Однако принятый ответ отличается.
Это применяет стили к элементам, имеющим оба класса, поэтому в этом примере
<div>
стили должны применяться только к элементам с обоими классами (в браузерах, которые правильно интерпретируют CSS):Так что в основном думайте об этом так: разделение запятыми применяется к элементам с одним классом ИЛИ другим классом, а разделение точек применяется к элементам с одним классом И другим классом .
источник
.blue-border.background
think of it as AND and OR
: Отличный совет. Могу добавить, что это.x .y
можно представить какy && ancestors.has(x)