后代子操作员'＆gt;'不总是工作

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

颜色的默认值是inherit。我updated your jsFiddle首先使用以下代码：

div {color:black;}