.selector1 .selector2和.selector1 > .selector2有什么不同？

Question

.selector1 .selector2和.selector1 > .selector2有什么不同？那么，两者不都表明.selector2是.selector1的子级吗

有什么不同？

Answer 1

>表示第二个元素必须是直接子元素。只要使用空格，第二个元素就可以在第一个元素“下面”的任何地方找到。例如：

<ul id="root">
    <li id="a">
        <ul>
            <li id="x"></li>
            <li id="y"></li>
        </ul>
    <li id="b">
        Something
    </li>
</ul>

选择器'#root > li'只匹配a和b，但'#root li'也匹配x和y。

Answer 2

第一种形式匹配任何后代，无论它是多少层，而第二种形式只匹配直接的子代。

以元素的层次结构为例：

<div id="Bob" class="selector1">
    <div id="Mary" class="selector2">
        <div id="Alice" class="selector2">
        </div>
    </div>
</div>

选择器.selector1 .selector2将同时匹配玛丽和爱丽丝。另一方面，因为Alice不是selector1元素的直接子元素，所以.selector1 > .selector2只与Mary匹配。