子选择器 | Child selectors
Child selectors
该子元素组合因子（>）被放置在两个CSS选择器之间。仅当第二个选择器所匹配的元素是第一个选择器所匹配的元素的子节点时，该子元素选择器才会匹配那些子元素。
/* List items that are children of the "my-things" list */
ul.my-things > li {
margin: 2em;
}
由第二个选择器匹配的元素必须是由第一个选择器匹配的元素的直接子元素。这比后代选择器（descendant selector）更严格，后者仅要求第一个选择器选择出的元素能匹配第二个选择器选择出的元素的某些祖先节点即可，而不管DOM上“跳”的数量。
语法
selector1 > selector2 { style properties }
实例
CSS
span {
background-color: white;
}
div > span {
background-color: DodgerBlue;
}
HTML
<div>
<span>Span #1, in the div.
<span>Span #2, in the span that's in the div.</span>
</span>
</div>
<span>Span #3, not in the div at all.</span>
结果
规范
| Specification | Status | Comment |
|---|---|---|
| Selectors Level 4The definition of 'child combinator' in that specification. | Working Draft | |
| Selectors Level 3The definition of 'child combinators' in that specification. | Recommendation | No change. |
| CSS Level 2 (Revision 1)The definition of 'child selectors' in that specification. | Recommendation | Initial definition. |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | (Yes) | 7.0 | (Yes) | (Yes) |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | ? | (Yes) | ? | ? | ? | ? |
