">"（大于号）CSS 选择器是什么意思？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3225891/
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 does the ">" (greater-than sign) CSS selector mean?
提问by Misha Moroshko
For example:
例如：
div > p.some_class {
/* Some declarations */
}
What exactly does the >sign mean?
究竟是什么的>标志是什么意思？
回答by BoltClock
>is the child combinator, sometimes mistakenly called the direct descendant combinator.1
>是子组合子，有时被误称为直接后代组合子。1
That means the selector div > p.some_classonly selects paragraphs of .some_classthat are nested directly insidea div, and not any paragraphs that are nested further within.
这意味着选择器div > p.some_class只选择直接.some_class嵌套在a内的div段落，而不选择任何进一步嵌套在其中的段落。
An illustration:
一个例证：
<div>
<p class="some_class">Some text here</p> <!-- Selected [1] -->
<blockquote>
<p class="some_class">More text here</p> <!-- Not selected [2] -->
</blockquote>
</div>
What's selected and what's not:
什么被选中，什么不是：
Selected
Thisp.some_classis located directly inside thediv, hence a parent-child relationship is established between both elements.Not selected
Thisp.some_classis contained by ablockquotewithin thediv, rather than thedivitself. Although thisp.some_classis a descendant of thediv, it's not a child; it's a grandchild.Consequently, while
div > p.some_classwon't match this element,div p.some_classwill, using the descendant combinatorinstead.
Selected
Thisp.some_class直接位于 内部div，因此在两个元素之间建立了父子关系。未选择
这p.some_class包含blockquote在 中div，而不是div本身。虽然这p.some_class是 的后代div，但它不是孩子；这是一个孙子。因此，虽然
div > p.some_class不会匹配此元素，但div p.some_class会使用后代组合器代替。
1Many people go further to call it "direct child" or "immediate child", but that's completely unnecessary (and incredibly annoying to me), because a child element is immediate by definitionanyway, so they mean the exact same thing. There's no such thing as an "indirect child".
1许多人更进一步称其为“直接子元素”或“直接子元素”，但这完全没有必要（而且对我来说非常烦人），因为无论如何定义子元素都是直接的，所以它们的意思完全相同。没有“间接孩子”这样的东西。
回答by Premraj
>(greater-than sign) is a CSS Combinator.
>（大于号）是一个 CSS 组合器。
A combinator is something that explains the relationship between the selectors.
组合器是解释选择器之间关系的东西。
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
一个 CSS 选择器可以包含多个简单的选择器。在简单的选择器之间，我们可以包含一个组合器。
There are four different combinators in CSS3:
CSS3 中有四种不同的组合器：
- descendant selector (space)
- child selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)
- 后代选择器（空格）
- 子选择器 (>)
- 相邻兄弟选择器 (+)
- 一般同级选择器 (~)
Note:<is not valid in CSS selectors.
注意：<在 CSS 选择器中无效。
For example:
例如：
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>
Output:
输出：
回答by Dagg Nabbit
As others mention, it's a child selector. Here's the appropriate link.
正如其他人提到的，它是一个子选择器。这是相应的链接。
回答by dan04
It matches pelements with class some_classthat are directlyunder a div.
它匹配p与类元素some_class是直接下div。
回答by tschaible
All ptags with class some_classwhich are direct children of a divtag.
p具有类的所有标签some_class都是标签的直接子代div。
回答by suraj rawat
<div>
<p class="some_class">lohrem text (it will be of red color )</p>
<div>
<p class="some_class">lohrem text (it will NOT be of red color)</p>
</div>
<p class="some_class">lohrem text (it will be of red color )</p>
</div>
div > p.some_class{
color:red;
}
All the direct children that are <p>with .some_classwould get the style applied to them.
所有<p>与 with的直接子级.some_class都会将样式应用于它们。
回答by Avinash Malhotra
( child selector) was introduced in css2. div p{ } select all p elements decedent of div elements, whereas div > p selects only child p elements, not grand child, great grand child on so on.
（子选择器）是在 css2 中引入的。div p{ } 选择 div 元素的所有 p 元素，而 div > p 只选择子 p 元素，而不是孙子、曾孙子等等。
<style>
div p{ color:red } /* match both p*/
div > p{ color:blue } /* match only first p*/
</style>
<div>
<p>para tag, child and decedent of p.</p>
<ul>
<li>
<p>para inside list. </p>
</li>
</ul>
</div>
For more information on CSS Ce[lectors and their use, check my blog, css selectorsand css3 selectors
