CSS中 > 的作用

HTML

<div class='test'>
    <div>
        长子
        <div>孙子</div>
    </div>
    <div>次子</div>
    <span>子代元素设置了边框样式，而孙代不受影响。</span>
</div>

CSS

div{padding:10px;margin:5px 0;border:1px solid green;}
div.test{width:200px;height:200px;}
div.test > div{border:3px solid #ebecbe;}


span{color:#999;font-style:italic;}

效果

作用

div.test > div  相当于把儿子单独摘了出来,儿子的样式变了,但是孙子没变.