CSS结构好的话，没有必要使用过多的类或者标识选择符。这是因为你可以指定在选择符内的选择符，而不必使用CSS嵌套。（或者更好的说法，上下文选择符--译者著）
1、比如：
ExampleSourceCode#top{ background-color:#ccc padding:1em } #toph1{ color:#ff0 } #topp{ color:red font-weight:bold }
2、这就减去不必要的类或者标识选择符，如果应用到像这样的HTML中：
ExampleSourceCode<dividdivid="top"> <h1>Chocolatecurry</h1> <p>Thisismyrecipeformakingcurrypurelywithchocolate</p> <p>Mmmmmmmmmm</p> </div>
这是因为，用英文半角空格间隔选择符，我们指明了在标识id内的h1有“#ff0”的颜色，而p则是红色red和粗体bold。这可能也会有些复杂（因为可能不止两级，比如在内在内在内在内等等）。有必要多加练习。
随便写几个例子，写的三种方法都是一样的效果，就是给你一个思路，能达成效果就行或者根据具体情况而定
<style type="text/css">.fangxing01{ float:left width:200px height:200px padding:50px background:blue box-sizing:border-box margin-right:10px}
.yuanxing01{ float:left width:100px height:100px border-radius:50px background:red}
.fangxing02{ float:left width:200px height:200px background:blue margin-right:10px}
.yuanxing02{ float:left width:100px height:100px margin:50px border-radius:50px background:red}
.fangxing03{ position:relative float:left width:200px height:200px background:blue}
.yuanxing03{ position:absolute left:50px top:50px width:100px height:100px border-radius:50px background:red}
</style>
</head>
<body>
<div class="fangxing01">
<div class="yuanxing01"></div>
</div>
<div class="fangxing02">
<div class="yuanxing02"></div>
</div>
<div class="fangxing03">
<div class="yuanxing03"></div>
</div>
</body>
都可以用，好像是后者优先级高，这个不太确定，如果优先级高的话，用前者很难去覆盖后者的属性，需要!important调整优先级。如果优先级相同，会按从上倒下的顺序读css，也就是说写在下面的css会覆盖掉上面相同属性的css类。
