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;}