css中大于号的作用

//样式
div span{
   font:10px;
       color:green;}
div>span {
       font:10px;
       color:blue;
}

//代码
<div>
       <span>孙子</span>

      

       <span>儿子1</span>
       <span>儿子2</span>
</div>

孙子边框不是blue而儿子的边框才是blue,孙子边框为绿色。当然样式表的顺序不能调换