概述
当使用 > 选择符分隔两个元素时,它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素. 与之相比, 当两个元素由 后代选择器 相连时, 它表示匹配存在的所有由第一个元素作为祖先元素(但不一定是父元素)的第二个元素, 无论它在 DOM 中"跳跃" 多少次.
语法
元素1 > 元素2 {样式声明 }
示例
span { background-color: white; }
div > span {
background-color: DodgerBlue;
}
当应用与如下标记时:
<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 a div at all</span>
会得到下面的效果:
Span 1. In the div. Span 2. In the span that's in the div.
Span 3. Not in a div at all.
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Selectors Level 3 | Recommendation | |
| CSS 2.1 | Recommendation |
浏览器兼容性
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | 7.0 | (Yes) | (Yes) |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? | ? |