第 1 页：空格运算符第 2 页：HTML中复合调用样式类第 3 页：CSS+HTML的模块化设计

三、CSS+HTML的模块化设计

　　1、举个简单例子：
      .classNameA .classNameB .classNameC 
      就是一个类包路径,A包含B,B包含C. 意思就是,在A块内的全部HTML代码(包括B块、C块),先应用样式classNameA； 然后，在B块内的全部HTML代码(包括C块),先应用样式classNameA，之后再先应用样式classNameB； 最后，在C块内的全部HTML代码,先应用样式classNameA，再先应用样式classNameB,最后应用样式classNameB；

　　2、在样式表中，关于类包的路径，对于某些复杂的HMTL代码，最后写绝对路径，就是每一个类名都不要拉下。这样可读性更强，错误率更小；当然，宽容度就越低。 
      例如 
以下是引用片段：
<style type="text/css">  
/*控制 li 的样式*/  
.a1 ul li {  
    color:red;  
} 
/*控制class="a"的div块内，全部连接 a 的样式*/ 
.a1 a { 
    font-size:20px; 
} 
/*控制class="a"的div块内，一个一个为 class="mylink"的样式*/ 
.a1 .myLink { 
       font-size:12px; 
} 
/*控制 li 内连接a的样式*/ 
.a1 ul li a { 
       font-size:40px; 
} 
/*控制名 li 内，一个为 class="mylink"的连接的样式 */ 
.a1 ul li .myLink { 
       font-size:60px; 
       font-family:黑体; 
} 
/*b1样式*/ 
.b1 { 
      color:blue; 
} 
/*控制 li 内 b1 的样式*/ 
.a1 ul li .b1 { 
     color:green; 
} 
</style> 
<div class="a1"> 
      <a href="#">linkText</a> 
      <a href="#" class="myLink">titleText</a> 
      <div class="b1">b11111111</div> 
      <ul> 
            <li> 
                   <a href="#">titleText</a> 
                   <div class="b1">nameCN</div> 
            </li> 
            <li> 
                   <a href="#" class="myLink">titleText</a> 
                   <div class="b1">nameCN<span class="c1">nameEN</span></div> 
            </li> 
            <li>titleText</li> 
            <li>titleText</li> 
            <li>titleText</li> 
      </ul> 
</div> 
 

      样式按*.HTML从内层到外层；按*.CSS上下文，从下文到上文；按内联样式表上下文，从下文到上文；按内嵌>内联>外联的优先级； 
叠加覆盖计算最终显示效果。
      CSS语句，严格说是JS代码的一类，换句话说，CSS语句也是“弱类型”的，空格是一个“运算符”，由于“弱类型”不严谨，所以，没有空格的时候，虽然不报错，也有显示效果，但那是按错误逻辑运算的，有时歪打正着，但确莫名其妙。再加上有很多满足各浏览器的HACK语法，CSS语句就更加零乱不堪。所以，写的时候，尽量在满足宽容度的情况下，严禁一些。