在CSS选择器中使用空格或大于号>？

Question

我有一些CSS代码:

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

我做了我想做的事,但也写得像

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

会做同样的事情.

是否有任何理由使用其中一个或者他们只是两种不同的方式来做同样的事情？

Answer 1

不,它们完全不同,使用>选择子元素,而使用空格将选择任何级别的嵌套元素.

例如…

?在选择器中使用/ space ...

<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嵌套在section标记内的元素,因为它是外部的孙子(但不是子元素)div.

Demo 2 (使用>)

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

来自MDN :( For ?)

的?组合子(即的意思表示的空间中,或者更恰当的一个或多个空格字符)结合了两个选择器,使得组合选择器只对其中存在的第一选择器相匹配的祖先元素第二选择匹配那些元件相匹配.后代选择器与子选择器类似,但它们不要求匹配元素之间的关系是严格的父子关系.

来自MDN :( For >)

所述>组合子分隔两个选择器和可由所述第一匹配元素的直接子由所述第二选择器相匹配只有那些元件相匹配.相反,当两个选择器与后代选择器组合时,组合选择器表达式匹配由第二选择器匹配的那些元素,其中存在与第一选择器匹配的祖先元素,而不管DOM上的"跳跃"的数量.

Answer 2

它们意味着两件事.

.welcome div意味着选择任何div后代.welcome.所以它会选择所有这些div元素:

<section class="welcome">
    <div>Me</div>
    <div>And me
        <div>And me
            <div>And me too!</div>
        </div>
    </div>
</section>

.welcome > div只选择直接的孩子div的.welcome.所以:

<section class="welcome">
    <div>It selects me</div>
    <div>And me
        <div>But not me
            <div>And not me either!</div>
        </div>
    </div>
</section>

阅读http://css-tricks.com/child-and-sibling-selectors/和https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors

Answer 3

取自W3C CSS 参考，

英孚

匹配作为 E 元素后代的任何 F 元素。

然而

E > F

匹配作为元素 E 的子元素的任何 F 元素。

孩子只是下一代。后代是任何后代中的个体。