CSS дочерний селектор (>) не работает с IE

Question

Следующий CSS хорошо работает в Firefox, но не работает в браузере IE. Почему?
Кроме того, как я могу сделать так, чтобы CSS воздействовал только на элементы, находящиеся непосредственно под родительским элементом?

CSS:

.box{font:24px;}
.box>div{font:18px}
.box>div>div{font:12px;}

HTML:

<div class="box">
   level1
   <div>
      level2
      <div> level3</div>
      <div> level3</div>
   </div>
   <div>
      level2
      <div> level3</div>
      <div> level3</div>
   </div>
</div>

Answer 1

Internet Explorer поддерживает дочерний селектор (>) начиная с версии 7, но только в стандартном режиме. Убедитесь, что вы используете Doctype, который запускает стандартный режим .

Если вы ориентируетесь на IE6, то вам не повезло. Вам нужно либо зависеть от JS, либо использовать потомки селекторов.

a>b { foo }

становится

a b { foo }
a * b { reverse-of-foo }

Answer 2

Дочерний селектор вообще не поддерживается IE6 и только частично IE7.

Quirksmode.org: дочерний селектор

Таблицы совместимости CSS

К сожалению, нет никакого способа сделать это, кроме как «отменить» определения для всех внуков.

Answer 3

Возможно, я ошибаюсь из-за того, что вы ищете, но именно так я бы решил вашу проблему:

.box {font:24px;}
.box div {font:18px}
.box div div {font:12px;}

Это будет хорошо работать для вас, например, однако имейте в виду, что если у вас есть другой .box с div в нем, то это также повлияет