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