'>' 和 CSS 选择器中的空格有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2636379/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the difference between '>' and a space in CSS selectors?
提问by Randy Mayer
What's the point using this syntax
使用这种语法有什么意义
div.card > div.name
What's the difference between this
这有什么区别
div.card div.name
回答by Matti Virkkunen
A > Bwill only select B that are direct children to A (that is, there are no other elements inbetween).
A > B只会选择 B 是 A 的直接子元素（也就是说，中间没有其他元素）。
A Bwill select any B that are inside A, even if there are other elements between them.
A B将选择 A 内的任何 B，即使它们之间还有其他元素。
回答by Pekka
>is the child selector.It specifies only immediate child elements and not any descendant (including grandchildren, grand-grandchildren etc.) as in the second example without the >.
>是子选择器。它仅指定直接子元素，而不指定任何后代（包括孙子、孙子等），如第二个示例中没有>.
The child selector is not supported by IE 6 and lower. A great compatibility table is here.
IE 6 及更低版本不支持子选择器。一个很好的兼容性表在这里。
回答by René Nyffenegger
div.card > div.namematches <div class='card'>....<div class='name'>xxx</div>...</div>but it doesn't match <div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>
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.namematches both.
div.card div.name两者都匹配。
That is, the >selector makes sure that the selected element on the right side
of the >is an immidiate child of the element on its left side.
也就是说，>选择器确保右侧的选定元素>是其左侧元素的直接子元素。
The syntax without the >matches any <div class='name'>that is a descendant (not only a child) of <div class='card'>.
不带 的语法>匹配 any<div class='name'>的后代（不仅仅是子代）<div class='card'>。
回答by eozten
A > B selects B if it's a direct children of A, whereas A B selects B whether it is a direct children of B or not.
A > B 如果 B 是 A 的直接孩子，则选择 B，而无论 B 是否是 B 的直接孩子，AB 都会选择 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>回答by S.Goswami
> vs Space
> vs 空间
Consider the two scenarios div > span { }vs. div span { }
考虑两种场景div > span { }对比div span { }
Here, the <space>selects all the all the <span>elements of <div>element even if they are inside another element. The > selects all the children of <div>element but if they are inside another element.
在这里，即使它们在另一个元素内，也会<space>选择<span>元素的所有<div>元素。> 选择<div>元素的所有子元素，但如果它们在另一个元素内。
> (Greater than):
>（大于）：
div > span {
color: #FFBA00 ;
}<body>
<div>
<p>
<span>Hello,</span>
</p>
<span>World!</span>
</div>
</body>This one just selects the <span>World!</span>and it won't look for the <span>inside <p>tag.
这个只是选择了<span>World!</span>，它不会寻找<span>内部<p>标签。
Space
空间
div span {
color: #FFBA00 ;
}<body>
<div>
<p>
<span>Hello,</span>
</p>
<span>World!</span>
</div>
<body>This one selects all the span tags, even if they are nested inside another tag.
这个选择所有的跨度标签，即使它们嵌套在另一个标签中。
