简单的CSS代码，我不明白[重复]答案

【问题标题】：simple css code, i dont understand [duplicate]简单的CSS代码，我不明白[重复]
【发布时间】：2013-08-16 01:54:29
【问题描述】：

我正在查看一些 css 代码，但我不明白这一行。该代码有一个名为 shape 的 div，其中包含其他六个 div，每个 div 都包含一个图像。

以下代码选择哪些图像？正如我所说的div形状包含其他六个div，那么为什么下面的代码只选择一个图像？

                       #shape > div{
                        }

【问题讨论】：

标签： css

【解决方案1】：

这将选择 ID 为 shape 的元素的子元素的任何 DIV。

【讨论】：

No is not，这是不正确的。
正确。在此处查找：w3.org/TR/CSS2/selector.html 引用：“E > F 匹配作为元素 E 的子元素的任何 F 元素。”
@Connor - 如果您的意思是 ID 是 shape 而不是 #shape，您可以编辑答案并修正错字。
@Connor：你混淆了child和descendant。虽然所有孩子都是后代，但并非所有后代都是（同一个父母的）孩子。
不用担心，根据解释，您实际上是对的。 :) @ÁlvaroG.Vicario 对我来说，children 只是那些直接位于元素内部的元素。现实世界的类比：祖父母可能也称他们孩子的孩子为孩子，但他们实际上是他们的孙子。

【解决方案2】：

这会将样式应用于divs，它们是id为#shape的元素的直接子元素

演示：Fiddle

在演示中，样式不适用于 section > div，因为容器 div 不是 #shape 的直接子级

【讨论】：

【解决方案3】：

实际上A > B 是更通用的A B 的特化：

简单示例：

CSS

.a .b {
    color: red;
}

.a > .b {
    color: blue;
}

HTML

<div class="a">
    <div class="b">Hello</div>
    <div class="c">
        <div class="b">World!</div>
    </div>
</div>

你可以试试这个例子right here at jsFiddle。

如您所见，蓝色并未应用于类b 的元素的第二个实例，因为它不是直接子元素；只有一个后代。否则两个元素都会是蓝色的，因为后面的第二个定义 (.a > .b)。

【讨论】：

【解决方案4】：

> 是子 combinator，也称为直接后代组合子。
这意味着选择器 #shape > div 只选择直接位于 ID 为 #shape 的标签内的 div

演示： http://jsfiddle.net/JDs9G/

【讨论】：