首页 > 技术文章 > CSS中 > 的作用

yyy251 2017-06-03 10:48 原文

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  相当于把儿子单独摘了出来,儿子的样式变了,但是孙子没变.

 

推荐阅读