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

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

98 голосов
/ 04 марта 2011

У меня есть некоторый 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 ]

165 голосов
/ 01 сентября 2011

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

Следующее: 

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

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

151 голосов
/ 04 марта 2011

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

Более подробное объяснение см. Крис .

...