简单的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>

您可以在jsFiddle尝试此示例.

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