一、空格运算符
7 A* W5 g7 t" b2 N- w' C3 o8 ^ （1）CSS语言
. p% z8 _9 s/ _/ z. D& H$ A4 c
简单地说，CSS语言类似JS语言，是通过客户端下载后，通过本地浏览器解析。而CSS语言又是非常低级的“弱类型”语言，离JS这种基于对象的比较完善的“弱类型”语言，还差相当一段距离。要知道CSS样式是定义出来的，而样式的呈现是根据文档流顺序和CSS优先级别，浏览器自己识别计算后显示出来的。而浏览器又有忽略和纠错功能（尤以IE为甚），所以样式定义的语法有错误，并不影响浏览器正常工作，只不过显示不出应有的效果罢了。在我们设计定义样式的时候，排错是比较令人苦恼的，其本质原因是于这种弱类型CSS语言本身的不严禁性有关系的，所以我们就更应该注重CSS定义的严禁，才能出较少的错误，较快更好的完成工作。
; j) D5 r& L( w5 z R
（2）CSS的运算符
; U' p' B0 s) e {* A
首先说，CSS语言的运算符就不多，有.#{}:";还有一个非常重要的空格。这几个运算符，都是常用的定义声明符号。而在CSS样式定义中，空格就有点特殊，我们可以把它视为在.Net或Java中命名空间或类包定义中的 . 运算符。换句话说，我们可以把空格视为路径指向的箭头，表明HTML标签的父子级别关系。CSS是与HTML想关联的，也就是说，CSS的每一个定义都与“某个HTML标签”或“某段模块化HTML代码”相对应，而HTML可以调用多个样式类。一个CSS样式类可以根据HTML代码来“复合定义”；一个HTML标签也可以“复合调用”多个样式类。所以说，CSS样式定义的复杂性与关联的HTML是密不可分。
0 J/ k% \+ \7 {# ?5 b' i （3）实例说明
, b6 A! m& e8 T2 a
2 R6 K- r$ B1 |3 S/ ]4 Q) V( H以下是引用片段：
- f& {( f* r( {<style type="text/css">
8 ^% i2 g/ H+ W, F2 ^td .b {
6 z9 Z6 `! c- \3 J+ g, V
color:#00ff00;
" e7 v( f F' N' Z p6 q' b; ?2 }}
4 F$ C( _% P1 Y' }8 ?+ l
th.b {
5 Y& B0 L ~/ |+ W$ | F color:#ff0000;
& N4 A0 `% w% h9 Q font-family:黑体;
; e4 g2 I _" X! q! \ font-size:20px;
! q0 t& i% d1 u) s5 |}
4 c9 |6 F/ C0 b
.b {
" c8 H; i4 U; h. f8 U
color:#0000ff;
; K" M, u' j8 C1 |0 |1 T- B
font-size:12px;
. D5 M% A" K' A$ J
}
: H! C# P% m3 C1 Q</style>
# M- M T" E# j9 x8 Z# v9 f* I9 X
<table>
8 P1 D6 l$ m E1 ?4 g6 c: l <tr>
" J' r3 W& M1 N" N$ @ ( k; u* K! M7 K1 V6 G
<td><div class="b">第一个类b的类路径是th .b</div></td>
4 n9 B/ e* f2 r" j/ D' D8 N8 t( J
<th class="b">第二个类b的类路径是th.b</td>
s" L" x5 E2 C
<td class="b">第三个类b的类路径是 .b</th>
+ R! r7 U; Z9 L/ f5 d d
</tr>
- u1 C! h4 k8 [* H& [4 Z9 u</table>
: n( r' ?# h3 D* D E<div class="b">第三个类b的类路径是 .b</div>
: h! G5 P {; V' J! A
讲解：
8 H4 n [, ^" G! x' e
1、第一个类b的类路径是td .b，定义该HTML文档内所有的td标签内的带class="b"的标签的样式 。
/ Y) w+ i; p7 y以下是引用片段：
) E; d' L2 T. }" E$ z/ D5 Q* vtd .b {
& C- m, H9 s" ]! b color:#00ff00;
1 Z, P3 Z" X x" j: v
}
l0 Y; G b# y8 c H; u
定义的是<td><div class="b">text</div></td>这组代码块中的b类，class="b"是包含在td标签内的，是td的子级，所以在这里要用“空格”指向明确表明父子级别关系。
2 ^7 U& Q7 w: K' z1 p, I% B* b U
2、第二个类b的类路径是th.b，定义的是该HTML文档内所有的带class="b"的th标签的样式。
" r- P' e9 n& W' ]2 @- ?7 ^ Z# T+ c; b以下是引用片段：
7 X+ d) }% m) L( j) m, m/ u _th.b {
3 G$ @% t! i/ c, G# {9 a+ g5 f
color: #FF0000
! w$ `9 N, f3 |1 _9 a8 r- X
}
8 Y4 i8 Z; Z' z& l) Y4 A0 e0 r( y 定义的是<th class="b">text</td>，在这里的代码中，th和class='b'是平级的，先th后.b组成一个同级类路径th.b，所以没有空格代表“HTML类”和“自定义类”具有同级路径！
4 T: D0 ]4 H, B- R3 X3 B5 a y
3、第三个类b的类路径是 .b，定义该HTML文档内所有的td标签的样式，它是该文档的一个全局样式，是body .b的简写。
8 G: D+ _& C; J. Y9 q- }
以下是引用片段：
! N! V# V% L& h- H8 X/ H.b {
. y; V* I% R$ @& x+ X+ T2 ?6 _- M
color:#0000ff;
, _# F; P; T+ ~1 m( O4 \
font-size:12px;
& V5 ?$ L5 O! ?( o: {! r; j}
8 w9 k5 U6 T4 \ 定义了<td class="b">第三个类b的类路径是td.b</th>和<div class="b">第三个类b的类路径是 .b</div>这两处的b类没有明确的路径指向，优先级别要比有明确路径的低。
( h U& N5 Z+ Y2 c4 K 4、大家可以看到，在HTML代码中，同样都是class="b"，但是在CSS定义时，采用的类路径不同，作用就不同了。类路径越完整，优先级越高。在具体应用的时候，我们可以，使用完整类路径来定义某HTML代码块某一些特殊地方，做异化处理。例如本例表头th的黑体字显示效果。
1 X& C3 v( E/ h/ I
推荐网站：中国培训财富网（
http://www.training163.com/）
