css - 简单的css代码，看不懂

Question

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

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

                       #shape > div{
                        }

score 5 · Accepted Answer

实际上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>

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

score 3 · Accepted Answer

3

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

于 2013-08-14T08:03:11.087 回答

score 2 · Accepted Answer

这会将样式应用于div具有 id 的元素的直接子元素 s#shape

在演示中，样式不适用，section > div因为容器div不是#shape

score 1 · Accepted Answer

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

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

4 回答 4