Дочерний селектор CSS (>) не работает с IE
Следующий 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>
3 ответа
Internet Explorer поддерживает дочерний селектор (>) с версии 7, но только в режиме Standards. Убедитесь, что вы используете Doctype, который запускает режим стандартов.
Если вы используете IE6, то вам не повезло. Вам нужно либо полагаться на JS, либо использовать селекторы-потомки.
a>b { foo }
становится
a b { foo }
a * b { reverse-of-foo }
Возможно, я ошибаюсь насчет того, что вы ищете, но вот как я могу решить вашу проблему:
.box {font:24px;}
.box div {font:18px}
.box div div {font:12px;}
Это сработает для вас, например , однако имейте в виду, что если у вас есть другой .box с div в нем, они также будут затронуты.
Селектор child вообще не поддерживается в IE6 и только частично в IE7.
Quirksmode.org: Child selector
К сожалению, нет никакого способа сделать это, кроме как "разгруппировать" определения для всех внуков.