子选择器

2 位贡献者:

概述

当使用  > 选择符分隔两个元素时,它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素. 与之相比, 当两个元素由 后代选择器 相连时, 它表示匹配存在的所有由第一个元素作为祖先元素(但不一定是父元素)的第二个元素, 无论它在 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  

浏览器兼容性

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 ? ? ? ? ?

相关

文档标签和贡献者

向此页面作出贡献: teoli, alimon
最后编辑者: teoli,