CSS 选择器中的“ >”和空格有什么区别？

小开

div.card > div.name符合 <div class='card'>....<div class='name'>xxx</div>...</div> 但不符合 <div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>

div.card div.name都符合。

也就是说，>选择器确保所选元素位于右侧 >的子元素是元素左边的一个直接子元素。

没有 >的语法匹配任何作为 <div class='card'>的子代(而不仅仅是子代)的 <div class='name'>。

小开

>是儿童选择计划。，它只指定直接的子元素，而不像第二个例子中没有 >的那样指定任何子元素(包括孙辈、孙辈等)。

IE6及以下版本不支持子选择器。一个非常好的兼容性表是给你。

小开

最佳答案

A > B将只选择直接为 A 的子元素 B (也就是说，中间没有其他元素)。

A B将选择 A 中的任何 B，即使它们之间存在其他元素。

小开

A > B 选择 B，如果它是 A 的直系子代，而 A B 选择 B，不管它是否是 B 的直系子代。

<p> USING SPACE </p>


<style>
.a .b {
background-color: red;
}
</style>


<span class="a">
a
<br>
<span class="b"> a b</span>
<br>


<span class="c">
<span class="b"> a b c</span>
</span>
</span>


<br><br>
<p> USING GREATER THAN SIGN</p>


<style>
.x > .y {
background-color: red;
}
</style>


<span class="x">
x
<br>
<span class="y"> x y</span>
<br>


<span class="z">
<span class="y"> x y z</span>
</span>
</span>

小开

> vs Space

考虑两个场景 div > span { }和 div span { }

在这里， (空格)选择 <div>元素中的所有 <span>元素，即使它们嵌套在多个元素中。>选择 <div>元素的所有子元素，但是如果它们不在另一个元素内。

让我们看看两个例子:

> (大于) :

div > span {
color: #FFBA00 ;
}

<body>
<div>
<div>
<span>Hello...</span>
<p><span>Hello!</span></p>
</div>


<span>World!</span>
</div>
</body>

这个选项只选择 <span>Hello...</span>(因为它紧跟在嵌套的 div标记之后)和 <span>World!</span>，它不会在 <p>标记中查找 <span>，因为它不紧跟在 div标记之后。

太空

div span {
color: #0A0 ;
}

<body>
<div>
<div>
<span>Hello...</span>
<p><span>Hello!</span></p>
</div>


<span>World!</span>
</div>
</body>

这个函数选择所有 span 标记，即使它们嵌套在其他标记中。