CSS множественный выбор классов

Question

Есть веб-страница, содержащая этот фрагмент HTML: <div class="a b"></div><div class="a"></div>.Как я могу скрыть второй div с помощью CSS, оставив первый видимым?Обратите внимание, что я не могу добавить другие классы, а также видимость первых изменений в div (иногда относительных, иногда абсолютных), и это не зависит от меня.

Answer 1

Вы можете скрыть оба, а затем показать тот, который имеет оба класса a и b

.a {display: none;}
.a.b {display: block;}

Если разметка не изменится, вы можете скрыть второй div с помощью следующего:

.a.b + .a {display:none;}

Это говорит о том, что что-либо с классом a, которое следует за чем-либо, оба с классами a и b должно быть скрыто.

Answer 2

div.a.b{display:none} /*take note, no spaces between .a and .b to signify that the div has both*/

или, так как первый содержит b

div.b{display:none}

Answer 3

Очень просто.Просто попробуйте это

.b {display:none;}

Answer 4

CSS3 определяет псевдокласс * отрицания :

.a:not(.b) {
    display: none;
}

Однако он получил поддержку только в IE 9 , поэтому текущий типичный cross-browser решение состоит в том, чтобы установить свойство для всех элементов (включая те, которые вы не хотите сопоставлять), а затем создать другое правило с более специфическим селектором , который восстанавливает исходный стиль.Это все еще имеет проблемы в IE 6 и более ранних версиях, так как они учитывают последний класс только при использовании нескольких классов для одного элемента.

.a {
    display: none;
}
.a.b { /* IE6 will treat selector as '.b' */
    display: block;
}

Обратите внимание, что если уже есть правила сболее конкретный селектор, который соответствует элементам, к которым вы не хотите прикасаться, или если установлен стиль inline (что не следует делать вне скрипта, манипулирующего страницей), вам не нужнодобавить второе правило, так как .a имеет такую ​​низкую специфичность.

Answer 5

Что вы имеете в виду, иногда видимость является абсолютной или относительной? видимость может быть только скрытой или видимой на div.

Вот что вам нужно для обновленного Вопроса

.a { display: hidden; } 
.b { display: inline !important; }

Answer 6

Просто создайте селектор для класса b:

.b { display: none; }

Если вам требуется, чтобы только элементы с классом a были скрыты, когда они также имеют класс b, вы можете использовать множественный селектор классов, присоединившисьселектор класса (без пробелов):

.a.b { display: none; }