what different is .selector1 .selector2 and .selector1 > .selector2?

what different is .selector1 .selector2 and .selector1开发者_运维知识库 > .selector2? Dont then both indicate the .selector2 is child of .selector1

What is different?

> means the second element must be an immediate child. Using simply the space, the second element can be found anywhere "underneath" the first element. For example:

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

The selector '#root > li' only matches a and b, but '#root li' matches x and y as well.

The first form matches any descendent no matter how many levels down it is, while the second form matches only immediate children.

Take this hierarchy of elements:

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

The selector .selector1 .selector2 will match both Mary and Alice. On the other hand, .selector1 > .selector2 will only match Mary, because Alice is not an immediate child of a selector1 element.