<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>
#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>