思洋互动网站建设学前班

本文和大家重点讨论一下CSS选择符的用法，这里将所有的CSS选择符都列举出来了，并对每个CSS选择符做单独的解释和举例，相信本文介绍一定会让你有所收获。

CSS选择符的用法和实例

本文主要讲了CSS选择符(CSSSelectors)用法和相关例子，虽然之前已经有不少对于CSS选择符的文章在网络上出现，不过我还是准备以自己的方式来写一写，这也是一种获得乐趣的途径。所以我小小的总结了一下css1及css2选择符（本文的CSS选择符都为css1及css2）的用法及实例，希望对大家有些许帮助。

现在已经将所有的CSS选择符都列举出来了，将就对每个CSS选择符做单独的解释和举例。对于以下的这些例子，有些只是简单的应用实例，有些还提供了对比例子，使得可以明显的看出该种选择符的使用范围和方法。
广州网站建设,网站建设,广州网页设计,广州网站设计

类型选择符(TypeSelectors)

语法：E1

说明：有的时候我们也将它叫做CSS标签选择符，因为它是直接用html标记来做选择符进行操作。目前所有主流浏览器均支持该选择符，属于CSS1选择符。

实例： 

1. div{color:#F00;}  
2. <div>这里是测试内容</div> 
3.  

包含选择符(DescendantSelectors)

语法：E1E2

说明：选择所有被E1包含的E2，这里的E1和E2即可以是html标记，也可以是class或id。目前所有主流浏览器均支持该CSS选择符，属于CSS1选择符。

实例： 

1. divem{color:#F00;}  
2. .testem{color:#F00;}  
3. <div>这里是<em>测试</em>内容</div> 
4. <divclassdivclass="test">这里是<em>测试</em>内容</div> 
5.  

ID选择符(IDSelectors)

语法：#sID

说明：以DOM中作为对象的唯一标识符的ID作为选择符。目前所有主流浏览器均支持该选择符，属于CSS1选择符。

实例： 

1. #test{color:#F00;}  
2. <dividdivid="test">这里是测试内容</div> 
3.  

类选择符(ClassSelectors)

语法：.className

说明：其效果等同于E1[class~=className]。可以为对象的class属性指定多于一个值(className)，其方法是用空格将每个className隔开。目前所有主流浏览器均支持该选择符，属于CSS1选择符。
广州网站建设,网站建设,广州网页设计,广州网站设计

实例：

1. .test{color:#F00;}  
2. .test2{font-size:14px;}  
3. <dividdivid="test">这里是测试内容</div> 
4. <dividdivid="testtest2">这里是测试内容</div> 
5.