本篇随笔介绍CSS的选择器。
大家都知道，CSS会将不同的样式规定进行组合，然后以选择器的方式让Html的内容使用。
一、常见的选择器：
①元素选择器（类型选择器）。在标记语言中，一般来说元素即指标签。我们使用在Html文本中的body、head以及<p></p>、<img />等等就是元素，或者叫做标签。
而元素选择器即直接规定某个元素的表现样式，从而使标签不需要添加显示调用。
如下的例子：
1 2 3元素选择器示例 4 7 8 9 10这是示例文字，注意看背景色
11 12
元素选择器是强制要求Html文本内所有同一标签的表现样式，主要用于规定页面风格和一些细节的处理。比如在使用div-ul（ol）-li布局的页面内用过元素选择器将列表项的编号去除。
②类选择器。使用“.选择器名{样式}”格式的选择器。其定义及使用如下：
1 2 3类选择器示例 4 7 8 9 10这是测试文字，请注意看它的背景色
11 12
使用时需要显示调用。类选择器里有一个很重要的概念，为“多类选择器”。顾名思义，多类选择器即为多个类选择器的组合，当多个类选择器被同时引用，如果定义了这种情形，则执行定义内容。下面的例子将做为解释：
1 2 3多类选择器示例 4 13 14 15 16这是示例文字，注意看背景色
17这是示例文字，注意看背景色
18这是示例文字，注意看背景色
19这是示例文字，注意看背景色
20这是示例文字，注意看背景色
21这是示例文字，注意看背景色
22这是示例文字，注意看背景色
23 24
相信我，您应该将它测试一下，绝对会超出您的想象，因为：结果已经出乎我的意料了！
由于多类选择器的特殊性，经常被用于表示整合的具有多个特质的内容展示。
IE7以下版本不支持多类选择器，IE9支持得十分奇特。
③ID选择器。ID选择器和类选择器在定义上的区别是将.换成#，在使用时没有语法区别。我们通过一个简单的例子来认识ID选择器：
1 2 3ID选择器示例 4 7 8 9 10这是示例文字，注意看背景色
11 12
以上的三种即常见选择器。我们来进行简单的总结：
①元素选择器直接硬性规定，无需显示引用，一般用于风格的统一和细节的处理。
②类选择器一般用于描述细微的样式，应尽量将类选择器的作用范围细化（一般只用于描述一到两个表现形式）。
③ID选择器用于为标签内容赋予特殊的意义。
我们来回忆一下类选择器和ID选择器的区别：一个标签能够引用多个类选择器，而一个标签只能引用一个ID选择器。类选择器我们一般用于重复并组合使用，并且尽量将其职能细化（比如一个名为.c_l{clear:left}的类选择器，只是为了清除浮动，它应该出现在任何需要它的地方，而且它也应该和其他类选择器组合完成它的职能）。ID选择器是某一个内容的id（可以理解为我们为某一个内容定制了一些表现形式，因为id实际上某个元素的标识，它在整个html文档内应该是唯一的），只使用一次。因为他们的意义不同，初学者一定要注重理解。
关于选择器的优先级我不做赘述，大家应该自己查阅资料、书籍学习，并在实践中理解运用。
以下是常见选择器的组合运用：
①逗号。逗号能使多个选择器使用相同样式。
1 2 3常见选择器组合运用示例1 4 7 8 9 10这是实例文字，请看背景颜色
11这是实例文字，请看背景颜色
12这是实例文字，请看背景颜色
13 14
②标签+类。表示使用了某个类的标签的样式。
1 2 3常见选择器组合运用示例2 4 13 14 15 16
- 17
- 这是实例文字，请看无序列表项编号 18
- 这是实例文字，请看无序列表项编号 19
- 这是实例文字，请看无序列表项编号 20
- 这是实例文字，请看无序列表项编号 21
这是实例文字，请看背景颜色
22这是实例文字，请看背景颜色
23这是实例文字，请看背景颜色
24③标签加ID。同②，这种做法不常用，或者笔者不推荐，因为违背了一些原则。
1 2 3常见选择器组合运用示例3 4 8 9 10 11
- 12
这是实例文字，请看背景颜色
13这是实例文字，请看背景颜色
14④id+空格+类。表示使用了某个ID的元素下的使用了某个类的元素样式。
1 2 3常见选择器组合运用示例4 4 8 9 10 11这是实例文字，注意看背景颜色
12 15 16
当然，逗号依旧同样适用与④的情况。
下篇会介绍属性选择器、兄弟选择器等高级选择器的运用。
2012-05-14 23:20:28