Question

我一直在努力练习使用儿童组合子选择器，似乎有一些混合的结果。

我设置了以下示例html：

<div class="One">
    One Text
    <div class="Two">
        Two Text
        <div class="Three">
            Three Text
            <div class="Four">
                 THE BASE IS HERE.  
            </div>
        </div>
    </div>
</div>

然后我尝试做以下事情。

div.One > div.Two {
    color: blue;
}

我的结果与我刚刚使用了后代选择器相同。虽然，当我尝试在无序列表中使用具有有序列表的子组合器时，它似乎正如我所期望的那样工作。

这里发生了什么？

下面是一个我希望它如何表现的例子。

示例HTML：

<ul class="Parent">
<li>One</li>
<li>Two</li>
    <ol class="Child">
        <li>One One</li>
        <li>Two Two</li>
    </ol>
<li>Three</li>

并使用此选择器：

ul.Parent > li {
color: blue;
}

这个第二个例子只选择孩子，就像我期望的那样。但是当使用嵌套的div时......它总是沿着链子传给大孩子。

所以我的问题是，为什么它只选择第二个例子中的孩子而不是第一个？

Answer 1

子组合子选择器（>）以其父级的子为目标。它并不针对孩子们的后代。

后代选择器以父/祖先的子和其他后代为目标。

两个选择器都以儿童级元素为目标，因此在这些情况下，它们之间似乎没有任何区别。

请在此处查看包含定义的选择器列表：http://www.w3.org/TR/css3-selectors/#selectors

Answer 2

在第一个示例中，只有一个.One元素和一个.Two元素，而.Two是.One的子元素。因此，无论你使用子组合还是后代组合都不会有任何区别 - 两个选择器都只匹配那个孤独的.Two元素。任何E > F对都必须是E F对;前者是后者的适当子集。

你的第二个例子存在缺陷有两个原因：

如果您想比较子组合和后代组合，请避免使用color - 正如其他人提到的那样，它会继承，这会让您感到困惑。（这适用于这两个例子。）
内部ol实际上没有继承它的唯一原因是因为你没有正确地将它嵌套在一个外部li元素中。

但是，它仍然说明了为什么子组合器的工作方式与广告一样：因为内部li元素不是外部ul的子元素。他们是内心ol的孩子。

子和后代组合选择器之间的区别

2 个答案: