CSS Kind Selektor (>) funktioniert nicht mit IE

Question

Die folgende CSS funktioniert gut unter Firefox aber funktioniert nicht unter IE-Browser, Warum?
Wie kann ich auch nur die Elemente, direkt unter dem übergeordneten Element, von CSS betroffen machen?

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 unterstützt die Kindselektor (>) seit Version 7, aber nur im Standard-Modus. Stellen Sie sicher, dass Sie a Doctype that triggers standards mode verwenden.

Wenn Sie auf IE6 ausgerichtet sind, haben Sie kein Glück. Sie müssen entweder auf JS angewiesen sein oder Nachkommenselektoren verwenden.

a>b { foo } 

wird

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

Answer 2

Das Kind Wähler gar nicht von IE6 unterstützt wird und nur zum Teil durch IE7.

Quirksmode.org: Child selector

CSS Compatibility tables

gibt es leider keine Möglichkeit, dies zu tun, es sei denn, "un-declate" die Definitionen für alle Enkelkinder.

Answer 3

ich falsch sein kann über das, was Sie suchen, aber das ist, wie ich das Problem angehen würde: Sie zum Beispiel

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

Dies funktioniert gut, aber bewusst sein, dass, wenn Sie eine andere .box mit divs darin werden sie auch betroffen sein.