Есть ли способ запросить элемент с несколькими классами в CSS?

Question

Как запросить элемент, который имеет два класса одновременно?

Например:

<div><span class="major minor">Test</span></div>

Я хочу стилизовать все промежутки, в которых есть «основные» и «второстепенные» классы одновременно.

Answer 1

Следующее должно сделать трюк:

span.major.minor { color: red; }

Обратите внимание, что вы должны быть осторожны с Internet Explorer 6 - он будет читать только последний класс селектора. Например, он будет неправильно применять указанное выше правило к следующему:

<span class="minor">Test</span>

Answer 2

Используйте классификатор класса дважды, например .:

.major.minor { ... }

Но . Он не работает в IE6 (или в IE7 либо в режиме Quirks * ). Когда вы указываете несколько селекторов классов на одном элементе, IE обращает внимание только на последний элемент. Таким образом, вышеуказанный селектор будет соответствовать любому элементу с class="minor".

Обходные пути включают дублирование нескольких классов в один класс:

.major-minor { ... }
<span class="major minor major-minor">...</span>

Или, если имеются запасные элементы для его очистки, защитная оболочка:

.major .minor { ... }
<span class="major"><span class="minor">...</span></span>