CSS '>' 选择器；它是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4459821/
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
CSS '>' selector; what is it?
提问by Bojangles
I've seen the "greater than" (>) used in CSS code a few times, but I can't work out what it does. What does it do?
我见过>几次 CSS 代码中使用的“大于”( )，但我不知道它的作用。它有什么作用？
回答by Spudley
>selects immediate children
>选择直系孩子
For example, if you have nested divs like such:
例如，如果您有这样的嵌套 div：
<div class='outer'>
<div class="middle">
<div class="inner">...</div>
</div>
<div class="middle">
<div class="inner">...</div>
</div>
</div>
and you declare a css rule in your stylesheet like such:
然后在样式表中声明一个 css 规则，如下所示：
.outer > div {
...
}
your rules will apply only to those divs that have a class of "middle" since those divs are direct descendants (immediate children) of elements with class "outer" (unless, of course, you declare other, more specific rules overriding these rules). See fiddle.
您的规则仅适用于具有“中间”类的那些 div，因为这些 div 是具有“外部”类的元素的直接后代（直接子代）（当然，除非您声明了其他更具体的规则来覆盖这些规则） . 见小提琴。
div {
border: 1px solid black;
padding: 10px;
}
.outer > div {
border: 1px solid orange;
}<div class='outer'>
div.outer - This is the parent.
<div class="middle">
div.middle - This is an immediate child of "outer". This will receive the orange border.
<div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
</div>
<div class="middle">
div.middle - This is an immediate child of "outer". This will receive the orange border.
<div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
</div>
</div>
<p>Without Words</p>
<div class='outer'>
<div class="middle">
<div class="inner">...</div>
</div>
<div class="middle">
<div class="inner">...</div>
</div>
</div>Side note
边注
If you, instead, had a space between selectors instead of >, your rules would apply to both of the nested divs. The space is much more commonly used and defines a "descendant selector", which means it looks for any matching element down the tree rather than just immediate children as the >does.
相反，如果您在选择器之间有一个空格而不是>，则您的规则将适用于两个嵌套的 div。该空间更常用，它定义了一个“后代选择器”，这意味着它会在树中查找任何匹配的元素，而不仅仅是像这样的直接子元素>。
NOTE: The >selector is not supported by IE6. It does work in all other current browsers though, including IE7 and IE8.
注意：>IE6 不支持选择器。它确实适用于所有其他当前浏览器，包括 IE7 和 IE8。
If you're looking into less-well-used CSS selectors, you may also want to look at +, ~, and [attr]selectors, all of which can be very useful.
如果你正在寻找进入孔，使用较少的CSS选择器，你可能也想看看+，~和[attr]选择，所有这些都可以是非常有用的。
This pagehas a full list of all available selectors, along with details of their support in various browsers (its mainly IE that has problems), and good examples of their usage.
此页面包含所有可用选择器的完整列表，以及它们在各种浏览器（主要是有问题的 IE）中支持的详细信息，以及它们的使用示例。
回答by Adam Kiss
>selects all direct descendants/children
>选择所有直系后代/孩子
A space selector will select all deep descendants whereas a greater than >selector will only select all immediate descendants. See fiddle for example.
空格选择器将选择所有深层后代，而大于>选择器将仅选择所有直接后代。例如，请参阅小提琴。
div { border: 1px solid black; margin-bottom: 10px; }
.a b { color: red; } /* every John is red */
.b > b { color: blue; } /* Only John 3 and John 4 are blue */<div class="a">
<p><b>John 1</b></p>
<p><b>John 2</b></p>
<b>John 3</b>
<b>John 4</b>
</div>
<div class="b">
<p><b>John 1</b></p>
<p><b>John 2</b></p>
<b>John 3</b>
<b>John 4</b>
</div>回答by dheerosaur
回答by Nathan MacInnes
As others have said, it's a direct child, but it's worth noting that this is different to just leaving a space... a space is for any descendant.
正如其他人所说，它是一个直系子，但值得注意的是，这与只留下一个空间不同……一个空间是给任何后代的。
<div>
<span>Some text</span>
</div>
div>spanwould match this, but it would notmatch this:
div>span会匹配这个，但它不会匹配这个：
<div>
<p><span>Some text</span></p>
</div>
To match that, you could do div>p>spanor div span.
为了匹配，你可以做div>p>span或div span。
回答by Margarez
It is a Child Selector.
它是一个子选择器。
It matches when an element is the child of some element. It is made up of two or more selectors separated by ">".
当一个元素是某个元素的子元素时，它匹配。它由两个或多个以“>”分隔的选择器组成。
Example(s):
例子）：
The following rule sets the style of all P elements that are children of BODY:
以下规则设置作为 BODY 子元素的所有 P 元素的样式：
body > P { line-height: 1.3 }
Example(s):
例子）：
The following example combines descendant selectors and child selectors:
下面的例子结合了后代选择器和子选择器：
div ol>li p
It matches a P element that is a descendant of an LI; the LI element must be the child of an OL element; the OL element must be a descendant of a DIV. Notice that the optional white space around the ">" combinator has been left out.
它匹配作为 LI 后代的 P 元素；LI 元素必须是 OL 元素的子元素；OL 元素必须是 DIV 的后代。请注意，“>”组合符周围的可选空白已被排除。
回答by David M?rtensson
It declares parent reference, look at this page for definition:
它声明了父引用，请查看此页面的定义：
