例如…

在选择器中使用␣/空格…

<div class="welcome">
    <section>
        <div>This will be selected</div>
    </section>
    <div>This will be selected as well</div>
</div>

所以在这里,具有空格的选择器将在父元素的任何嵌套级别定位div.

Demo(使用␣/空格)

.welcome div {
    font-size: 20px;
    color: #f00;
}

使用>

<div class="welcome">
    <section>
        <div>This won't be selected</div>
    </section>
    <div>This will be selected</div>
</div>

而在这里,选择器将定位您的div,该元素是具有.welcome的元素的子元素,但它不会选择嵌套在段标签内的div,因为它是外部div的孙(但不是子)).

Demo 2(使用>)

.welcome > div {
    font-size: 20px;
    color: #f00;
}

从MDN：(对于␣)

The ␣ combinator (that’s meant to represent a space,or more
properly one or more whitespace characters) combines two selectors
such that the combined selector matches only those elements matching
the second selector for which there is an ancestor element matching
the first selector. Descendant selectors are similar to child
selectors,but they do not require that the relationship between
matched elements be strictly parent-child.

从MDN :(对于>)

The > combinator separates two selectors and matches only those elements matched by the second selector that are direct children of elements matched by the first. By contrast,when two selectors are combined with the descendant selector,the combined selector expression matches those elements matched by the second selector for which there exists an ancestor element matched by the first selector,regardless of the number of “hops” up the DOM.