css样式表的写法理解

<style>
  #a1{
    background-color:red;
  }

  #a1 div{
    background-color:green;
  }

  #a1 div div{
    background-color:gray;
  }

  .a2{
    background-color:yellow;
  }
  .a3{
    background-color:blue;  
  }
  .a4{
    color:red;
  }

  #a5,.bb{
     background-color:skyblue;
  }
</style>

<!-- #a1 div{}的含义:表示设置id=a1的div,其下的一级div的样式，可以延伸到所有下级  -->
<!-- #a1 div div{}的含义:表示设置id=a1的div，其下第二级div的样式  -->
<div id="a1">
  <div>aa(显示绿色)</div>
  <div>bb(显示绿色)</div>
  <div>
      dd
      <div>
         cc(显示灰色)
      </div>
  </div>
  asdflajsdflj(显示红色)
</div>
<div class="a2">dd(显示黄色)</div>

<!--一个div使用两种分开指定样式-->
<div class="a3 a4">
  ajljalf (背景蓝色，字体红色)
</div>

<!--样式表中不同样式名使用相同设置，用,分开-->
<div id="a5">jlkj</div>
<div class="bb">jlklklj</div>