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

【问题标题】：Difference between Child and Descendant Combinator Selectors子和后代组合选择器之间的区别
【发布时间】：2015-10-30 18:49:14
【问题描述】：

我一直在尝试使用子组合器选择器进行练习，但结果似乎好坏参半。

我设置了以下示例 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 时......它总是沿着链条传递给孙子。

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

【问题讨论】：

我不清楚你的问题。您期望发生什么（或没有发生）？顺便说一句，color 是一个继承属性，所以即使你把它限制在.Two div 中，它的所有子元素也会得到它。
w3schools.com/css/css_combinators.asp 有一些关于差异的注释。在这里查看“后代”和“孩子”的答案。
嗯，孩子就是后裔吧？
@torazaburo 孩子是后代，但后代不一定是孩子。我认为这就是这个问题的困惑所在。
Child 是后代的子集。例如，二、三和四是一的后代，但只有二是一的孩子。考虑一下您的家谱，您的曾祖母将您的祖母作为孩子和后裔，但您和您的母亲也是后裔，但不被视为她的孩子。

标签： css css-selectors selector

【解决方案1】：

子组合选择器 (>) 以作为其父元素的 子元素 的元素为目标。它不针对子代以外的后代。

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

两个选择器都针对子级元素，因此在这些情况下，它们之间似乎没有任何区别。

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

【讨论】：

【解决方案2】：

在您的第一个示例中，只有一个 .One 元素和一个 .Two 元素，并且 .Two 是该 .One 的子元素。因此，无论您使用子组合器还是后代组合器都不会产生任何影响——两个选择器都将匹配唯一的 .Two 元素。任何E > F 对也必然是E F 对；前者是后者的真子集。

您的第二个示例存在缺陷，原因有两个：

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

然而，它仍然证明了为什么子组合子可以像宣传的那样工作：因为内部 li 元素不是外部 ul 的子元素。他们是内在ol的孩子。

【讨论】：