语法:
E>F { sRules }
说明:
选择所有作为E元素的子元素F。
与包含选择符不同的是,子选择符只能命中子元素,而不能命中孙辈。
css中 >表示子元素选择器(Child selectors)。与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素,而不管孙辈、玄孙辈的元素。
示例如下:
创建Html元素
<div class='test'><div>
我是长子
<div>我是长孙</div>
</div>
<div>我是次子</div>
<span>子代元素设置了边框样式,而孙代不受影响。</span>
</div
设置css样式
div{padding:10pxmargin:5px 0border:1px solid green}div.test{width:200pxheight:200px}
div.test > div{border:3px solid #ebecbe}
span{color:#999font-style:italic}
观察显示效果
<span style="font-size:24px">.gl{//大于号样式
width: 12px
height: 12px
position: absolute
border-left: 1px solid #999
border-bottom: 1px solid #999
-webkit-transform: translate(0,-50%) rotate(-135deg)
transform: translate(0,-50%) rotate(-135deg)
}</span>