Question

我有一些CSS代码：

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

做我想做的事情，但也写得像

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

会做同样的事情。

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

Answer 1

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

例如......

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

<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：（适用于␣）

>组合子（表示空间或更多空间）正确地，一个或多个空白字符组合两个选择器这样组合选择器只匹配那些匹配的元素第二个选择器，其中有一个祖先元素匹配第一个选择器。后代选择器与儿童相似选择器，但他们不需要之间的关系匹配的元素必须是父母。

来自MDN：（适用于>）

{{1}}组合子分隔两个选择器并仅匹配那些选择器第二个选择器匹配的元素是直接子元素第一个匹配的元素。相比之下，当两个选择器是结合后代选择器，组合选择器表达式匹配第二个选择器匹配的元素哪个存在与第一个选择器匹配的祖先元素，不管＆＃34;跳数＆＃34; 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 reference，

E F

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

，而

E＆gt; ˚F

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

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

Answer 4

.welcome div

使用＆＃34; welcome＆＃34;选择元素内的所有元素。类

.welcome>div

选择父元素为＆＃34; .welcome＆＃34;的所有元素。类

Answer 5

如果您使用

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

css将应用于.welcome

的所有div后代

如果您使用

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

css将仅适用于直接子div而不是其后代

请找到链接http://jsfiddle.net/65rL6/

希望它有所帮助！

Answer 6

.welcome div将影响＆＃34;欢迎＆＃34;内的所有div。 class ...如果你使用选择器＆＃34;＆gt;＆＃34;它会影响到＃34;欢迎＆＃34;的孩子们。

作为一个例子：

<div class="welcome">
    <div class="one">
        <div class="two">
        </div>
    </div>
    <div class="other">
</div>

欢迎div将影响＆＃34;一个＆＃34;，＆＃34;两个＆＃34;和＆＃34;其他＆＃34;

欢迎＆gt; div只影响＆＃34; one＆＃34;和＆＃34;其他＆＃34;

使用大于或等于空格的空格>在CSS选择器？

6 个答案: