Чем отличаются .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 будет соответствовать Мэри и Алисе. С другой стороны, .selector1 > .selector2 будет соответствовать только Мэри, потому что Алиса не является непосредственным потомком элемента selector1.