css样式表中大于号和空格的区别

Question

css样式表中大于号和空格的区别,例如#div1 div和#div1 > div有什么区别

Answer 1

》是直接子元素，空格是所有子元素

 <style>
    #div1 div{color:#f00}
    #div1> div{color:green}
</style>
<div id="div1">
    <div>
        红色
        <div>绿色</div>
    </div>
</div>