简单的CSS代码，我不明白

Question

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

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

                       #shape > div{
                        } 

Answer 1

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

的特化

• A B将适用于元素B内某处的任何元素A。
• A > B仅适用于直接元素B的子元素A。

简单示例：

<强> 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），两个元素都将为蓝色。

Answer 2

这将选择任何ID为shape

的元素的DIV

Answer 3

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

演示：Fiddle

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

Answer 4

>是孩子combinator，也称为直系后代组合子 这意味着选择器#shape > div仅选择直接位于标识为#shape

的标记内的div

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