logo标签列表

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

csscss-selectors
39

我有一些CSS代码：

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

它实现了我的期望，但我也可以像下面这样编写：

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

会做完全相同的事情。

使用其中一个而不是另一个是否有任何原因，还是它们只是完成相同任务的两种不同方式？

2
尽管重复，但这个问题比原来的更有用；因为如果我已经知道它们被称为子节点或后代节点，那么为什么还要问一个问题。感谢这个天真的问题。 - whitehat
6个回答
66
不，它们完全不同，使用>选择一个子元素，而使用空格将选择任何级别的嵌套元素。
例如...
在选择器中使用␣/空格...
<div class="welcome">
    <section>
        <div>This will be selected</div>
    </section>
    <div>This will be selected as well</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 类名的元素，但它不会选中嵌套在 section 标签内部的 div，因为它是外部 div 的 孙子元素（而非子元素）。

Demo 2 (使用 >)

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

来自MDN：(对于␣)

␣组合器（表示空格，或更准确地说是一个或多个空格字符）结合两个选择器，使得组合选择器仅匹配第二个选择器所匹配的元素中，存在一个祖先元素匹配第一个选择器的元素。后代选择器类似于子选择器，但它们不要求匹配元素之间的关系严格为父子关系。

来自MDN：(对于>)

>组合器分离两个选择器，并仅匹配由第一个选择器匹配的元素的直接子元素中，由第二个选择器匹配的元素。相比之下，当两个选择器与后代选择器组合时，组合选择器表达式会匹配由第二个选择器匹配的元素中，存在由第一个选择器匹配的祖先元素，无论DOM上跨越多少级。

14

它们意思不同。

.welcome div 的意思是选择任何一个是 .welcome 后代的 div 元素。所以它会选择所有这些 div 元素：

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

.welcome > div只选择.welcome下直接的子元素div。所以:

.welcome > div 只会匹配 .welcome 下一级的 div 元素。

<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

5

这段内容摘自W3C CSS参考文档:

E F

选择任何作为E元素后代的F元素。

然而：

E > F

选择任何E元素的子元素F。

“子元素”指的是下一代，而“后代”则是在之后的所有代中的个体。

3

欢迎 div 将影响“欢迎”类内的所有 div…如果您使用选择器“>”，它将仅影响“欢迎”的子元素。

例如：

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

欢迎 > div 将影响 "one"，"two" 和 "other"。
欢迎 > div 只会影响 "one" 和 "other"。
2
.welcome div

选择所有位于具有“welcome”类的元素内部的元素。
.welcome>div

选择所有父元素带有“.welcome”类的元素。
2

if you use 

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

CSS将应用于.welcome的所有div后代元素。

如果您使用

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

CSS只会应用于直接的子级div元素，而不是它们的后代元素。

请查看链接http://jsfiddle.net/65rL6/

希望这有帮助！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接