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

Question

我一直在尝试使用 child 组合器 selector 进行练习，结果似乎有些好坏参半。

我设置了以下示例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;
}

我的结果和我刚刚使用后代 selector 一样。虽然，当我尝试将 child 组合器与无序列表中的有序列表一起使用时，它似乎按我预期的那样工作。

这是怎么回事？

下面是我期望它的行为方式的示例。

样本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>

并使用此 select 或：

ul.Parent > li {
color: blue;
}

第二个示例仅 select 是 child，正如我所期望的那样。但是当使用嵌套的 div 时......它总是沿着链条向下延伸到盛大 children.

所以我的问题是，为什么在第二个示例中只 select child 而在第一个示例中没有？

Answer 1

child 组合器选择器 (>) 以其 parent 的 child 为目标的元素。它不针对 children.

以外的后代

后代选择器以 parent/ancestor 的 child 和其他后代 为目标。

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

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

Answer 2

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

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

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

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

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

Difference between Child and Descendant Combinator Selectors

css

css-selectors

selector