1

看一下这个：

<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/

它不能正常工作。但是，如果我改变了边框而不是颜色，它就可以了。为什么？

4

4 回答 4

3

它是如何“无法正常工作”的？请记住，这color:是一个继承的属性。如果要排除它，请执行以下操作：

div div { color: black; }
.Root > div { color: green; }
于 2013-06-26T19:14:21.173 回答
2

因为默认颜色值为inherit.

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

于 2013-06-26T19:14:20.473 回答
0 
<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仍然是一个直接的孩子。

于 2013-06-26T19:14:42.257 回答
0

颜色的默认值是继承。我首先使用以下代码更新了您的 jsFiddle ：

div {color:black;}
于 2013-06-26T19:14:45.247 回答