CSS2 Multi Classing

Question

У меня есть следующий HTML:

<DIV class="foo bar"></DIV>

Я пытаюсь создать объявление класса CSS, соответствующее указанному элементу. Просматривая спецификации в разделе 8.2.3 , я думаю, что это должно сработать:

DIV.foo.bar { border-color: black; }

Но я тестировал на IE и Safari, оба не влияют на элемент. Какие-нибудь хитрости, как заставить это работать?

Answer 1

Здесь потенциально есть три проблемы.

1. Ваше выражение и HTML верны?

У вашего div нет ширины границы (из того, что вы опубликовали), поэтому вы можете не получить границу. Попробуйте:

<div class="foo bar"></div>

с

div.foo.bar { border: 1px solid black; }

2. У тебя есть какой-нибудь рост?

Ваш div (в зависимости от того, что вы опубликовали) не имеет высоты. Теперь на некоторых браузерах, которые будут отображаться как сплошная линия толщины границы. В зависимости от соседних элементов и настроек коллапса границ (особенно в Firefox больше, чем в IE / Safari, хотя) эта граница может исчезать при некоторых обстоятельствах.

3. IE6 не поддерживает несколько селекторов классов правильно

Несколько селектор класса не работает (правильно) в IE6. См. несколько классов и таблицу поддержки браузера .

Обычно уловка заключается в том, чтобы вкладывать div:

<div class="foo"><div class="bar"></div></div>

и затем, конечно:

div.foo div.bar { ... }

Не то же самое, очевидно, но у вас нет большого выбора. Другой вариант - объединить классы вручную:

div.foo { background: red; }
div.bar { border: 1px solid black; }
div.foobar { background: red; border: 1px solid black; }

<div class="foobar"></div>

Опять же, далеко от идеала. Но в IE6 вы можете сделать так много.

Answer 2

Я думаю, это потому, что вы указываете "border-color: black" без ширины или стиля рамки Попробуйте установить «border: solid 1px black» и посмотрите, работает ли это.

Answer 3

IE6 не поддерживает селекторы с несколькими классами на одном элементе. Сценарий IE-7.js предположительно исправляет это.

Ваш селектор должен нормально работать в IE7 + и последних версиях Safari.