以下是引用片段：

td .b {

color:#00ff00;

}

th.b {

color:#ff0000;

font-family:黑体;

font-size:20px;

}

.b {

color:#0000ff;

font-size:12px;

}

第一个类b的类路径是th .b	第二个类b的类路径是th.b	第三个类b的类路径是 .b

讲解：

1、第一个类b的类路径是td .b，定义该HTML文档内所有的td标签内的带class="b"的标签的样式 。以下是引用片段：

td .b {

color:#00ff00;

}

定义的是

这组代码块中的b类，class="b"是包含在td标签内的，是td的子级，所以在这里要用“空格”指向明确表明父子级别关系。

2、第二个类b的类路径是th.b，定义的是该HTML文档内所有的带class="b"的th标签的样式。以下是引用片段：

th.b {

color: #FF0000

}

定义的是

text，在这里的代码中，th和class='b'是平级的，先th后.b组成一个同级类路径th.b，所以没有空格代表“HTML类”和“自定义类”具有同级路径！

3、第三个类b的类路径是 .b，定义该HTML文档内所有的td标签的样式，它是该文档的一个全局样式，是body .b的简写。以下是引用片段：

.b {

color:#0000ff;

font-size:12px;

}

定义了

第三个类b的类路径是td.b和

这两处的b类没有明确的路径指向，优先级别要比有明确路径的低。

4、大家可以看到，在HTML代码中，同样都是class="b"，但是在CSS定义时，采用的类路径不同，作用就不同了。类路径越完整，优先级越高。在具体应用的时候，我们可以，使用完整类路径来定义某HTML代码块某一些特殊地方，做异化处理。例如本例表头th的黑体字显示效果。

二、HTML中复合调用样式类

(1)在一个HTML标签内，可以复合调用多个样式类，也是用空格做运算符，复合类名总字符不能超过256。

(2)示例：以下是引用片段：

.myTxt {

font-size:50px;

font-family:Arial Black;

}

.txtRed {

color:red;

}

.txtOrange {

colorrange;

}

.txtGreen {

color:green;

}

.txtBlue {

color:blue;

}

• 123
• Text
• Text
• Text

(3)应用：

对于某些多数样式属性累同，仅有几个不同样式属性的定义，可以用这个方法来缩写。也可以在某个不改变某个通用样式类的同时，用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代码，最后写绝对路径，就是每一个类名都不要拉下。这样可读性更强，错误率更小；当然，宽容度就越低。

例如以下是引用片段：

/*控制 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;

}

样式，按*.HTML从内层到外层；按*.CSS上下文，从下文到上文；按内联样式表上下文，从下文到上文；按内嵌>内联>外联的优先级；

叠加覆盖计算最终显示效果。

CSS语句，严格说是JS代码的一类，换句话说，CSS语句也是“弱类型”的，空格是一个“运算符”，由于“弱类型”不严谨，所以，没有空格的时候，虽然不报错，也有显示效果，但那是按错误逻辑运算的，有时歪打正着，但确莫名其妙。再加上有很多满足各浏览器的HACK语法，CSS语句就更加零乱不堪。所以，写的时候，尽量在满足宽容度的情况下，严禁一些。