在 CSS 选择器中使用空格或大于号 >？ [复制]答案

【问题标题】：Use a space or greater than sign > in CSS selector? [duplicate]在 CSS 选择器中使用空格或大于号 >？ [复制]
【发布时间】：2014-05-03 04:33:36
【问题描述】：

我有一些 CSS 代码：

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

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

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

也会这样做。

是否有任何理由使用一个而不是另一个，或者它们只是做同一件事的两种不同方式？

【问题讨论】：

虽然重复，但问题比原来的更有用；因为如果我已经知道它们被称为子节点或后代节点，为什么要问一个问题。感谢一个天真的问题

标签： css css-selectors

【解决方案1】：

如果你使用

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

css 将应用于 .welcome 的所有 div 后代

如果你使用

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

css 将仅应用于直接子 div 而不是它们的后代

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

希望对你有帮助！

【讨论】：

【解决方案2】：

.welcome div 将影响“welcome”类中的所有 div...如果您使用选择器“>”，它只会影响“welcome”的子级。

举个例子：

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

welcome div 会影响 "one"、"two" 和 "other"

welcome > div 只会影响 "one" 和 "other"

【讨论】：

【解决方案3】：

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

例如……

在选择器中使用␣/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 的元素的子，但它不会选择嵌套在section 标记内的div因为它是外部div 的孙子（但不是子）。

Demo 2 （使用>）

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

来自MDN：（对于␣）

␣ 组合符（用于表示一个空格或更多一个或多个空白字符）组合了两个选择器这样组合的选择器只匹配那些匹配的元素有祖先元素匹配的第二个选择器第一个选择器。后代选择器类似于 child 选择器，但它们并不要求它们之间的关系匹配的元素是严格的父子元素。

来自MDN：（对于>）

> 组合器分隔两个选择器并仅匹配那些由第二个选择器匹配的元素，它们是第一个匹配的元素。相比之下，当两个选择器结合后代选择器，组合选择器表达式匹配由第二个选择器匹配的那些元素存在与第一个选择器匹配的祖先元素，与 DOM 上的“跃点”数无关。

【讨论】：

【解决方案4】：

.welcome div

选择具有“欢迎”类的元素内的所有元素

.welcome>div

选择所有父元素为“.welcome”类的元素

【讨论】：

【解决方案5】：

取自W3C CSS reference，

英法

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

而

E > F

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

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

【讨论】：

【解决方案6】：

它们意味着两种不同的东西。

.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 只选择.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

【讨论】：