复合选择器内的空格表示层次关系，从左到右表示父级元素 子级元素 孙级元素 …。
所以，#box是对id=box的元素起作用，由于继承关系它的子元素也会有它的一部分属性；#box div就只对id=box元素的子元素中所有的div起作用，对其它元素如<p>不起任何作用了 。
1、第一种情况：<div class="box"></div>
.box{color:red} 这种是定义div元素box的css样式。比如color:red定义box里面的文字是红色。
2、第二种情况：
<div class="box">
<div class="box1">红色文字</div>
<div class="box2">蓝色文字</div>
</div>
.box .box1{color:red} 定义元素box下的子元素box1的css样式。
.box .box2{color:blue} 定义元素box下的子元素box2的css样式。
position:absolute
用定位做
如果你会用:before和:after一个div就搞定了。
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>document</title>
<style type="text/css">
*{margin: 0padding: 0}
#box{width:100pxheight:100pxbackground:blueposition: relativemargin: 100px auto}
#box:before,#box:after{content: ""display: blockposition: absolutetop:0left:100pxbackground: redwidth:30pxheight:30px}
#box:before{}
#box:after{top:30pxbackground: green}
/*在这里分界上面 是一个，下面是一个效果一样*/
#box2{width:100pxheight:100pxmargin:100px autoposition:relativebackground:red}
#box3,#box4{width:30pxheight:30pxposition:absoluteleft:100pxbackground:blue}
#box3{background:bluetop:0}
#box3{background:greentop:30px}
</style>
<body>
<div id="box"></div>
<!--在这里分界上面 是一个，下面是一个效果一样-->
<div id="box2">
<div id="box3"></div>
<div id="box4"></div>
</div>
</body>
</html>
