Как выбрать классы с пробелами

Question

Как выбрать класс, например class="boolean optional"?

Я пробовал это:

.boolean optional {CSS}

.boolean_optional {CSS}

Answer 1

Как говорит Зепплок, на самом деле это два класса в одном атрибуте: boolean и optional. Пробел не является частью имени класса; он действует как разделитель.

Эти три селектора будут соответствовать ему:

.boolean
.optional
.boolean.optional

Последний селектор подхватывает только этот элемент, так как он имеет обоих классов.

Вы никогда не включаете пробел при объединении селекторов классов, даже не так:

.boolean .optional

При этом выбираются элементы .optional, содержащиеся в отдельных элементах .boolean.

Answer 2

Это не классы с пробелами :) Их называют множественными селекторами классов.

Вам просто нужно убедиться, что все имена классов связаны (без пробелов между ними) и разделены точкой.

.boolean.optional {

}

Answer 3

Пробелы недопустимы в имени класса. class="boolean optional" означает, что элемент имеет классы boolean и optional, поэтому вы можете сопоставить его либо с .boolean, .optional, либо, если вы хотите сопоставить только объекты, которые являются необязательными и логическое, с .boolean.optional.

Answer 4

Я ценю, что это было некоторое время назад, но в случае, если кому-то интересно, я нашел также полезное то, как выбрать / выбрать элемент в элементе, который имеет оба класса ... Пример

.boolean.optional > p {
    color: red;
}

Возможно, не требует объяснения, но: превращает «текст абзаца в красный» ТОЛЬКО для элементов абзаца внутри элементов, в которых существуют оба класса, т.е. оба .boolean И .optional

Answer 5

У классов никогда не будет пробелов в их имени.В вашем примере это фактически два класса;boolean и optional.

для применения стиля к элементу, который имеет оба этих класса, конструкция имеет вид

.boolean.optional {
 /* CSS */
}

Однако, как известно, IE6 имеет некоторые проблемы с этим,См. эту ссылку для более подробной информации об известных причудах.