desendant子运算符 '>' 并不总是工作

Question

检查了这一点：

<div class="Root"> 
<div>direct child 1</div> 
<div> 
    <div>indirect child 1</div> 
    <div>indirect child 2</div> 
</div> 
<div>direct child 2</div> 
</div> 

.Root > div { 
color:green; 
} 

http://jsfiddle.net/N5qFu/86/

它不能正常工作。但如果不是颜色，我改变边界，它的工作原理。 为什么？

Answer 1

它是如何 “不正常”？请记住，color:是一个继承的属性。如果你想将它排除在外，然后做到这一点：

div div { color: black; } 
.Root > div { color: green; } 

Answer 2

Because the default color value is inherit.

http://jsfiddle.net/N5qFu/87/

Answer 3

<div class="Root"> 
    <div>direct child 1</div> <!-- this div is being colored --> 

    <div>  <!-- this div is being colored! still a direct child--> 
     <div>indirect child 1</div> <!-- color is being inherited --> 
     <div>indirect child 2</div> <!-- color is being inherited --> 
    </div> 

    <div>direct child 2</div> <!-- this div is being colored --> 
</div> 

的包装div仍然是一个直接的孩子。

Answer 4

颜色的默认值是继承的。 I updated your jsFiddle用以下代码优先：

div {color:black;}