CSS教程:CSS选择符的用法和实例

ID选择符(ID Selectors)

　　语法：#sID

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

　　实例：
　　#test{color:#F00;}
　　<div id="test">这里是测试内容</div>

类选择符(Class Selectors)

　　语法：.className

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

　　实例：
　　.test{color:#F00;}
　　.test2{font-size:14px;}
　　<div id="test">这里是测试内容</div>
　　<div id="test test2">这里是测试内容</div>

分组选择符(Grouping Selectors)

　　语法：E1,E2,E3

　　说明：将同样的定义应用于多个选择符，可以将选择符以逗号分隔的方式并为组。目前所有主流浏览器均支持该选择符，属于CSS1选择符。

　　实例：
　　.test,p{color:#F00;}
　　<div id="test">这里是测试内容</div>
　　<p>这里是测试内容</p>

通配选择符(Universal Selectors)

　　语法：*

　　说明：选定DOM中的所有对象。目前所有主流浏览器均支持该选择符，属于CSS2选择符。

　　实例：
　　*{color:#F00;}
　　<div>这里是测试内容</div>
　　<p>这里是测试内容</p>

子选择符(Child Selectors)

　　语法：E1 > E2

　　说明：选择所有作为E1子对象的E2，不包括孙辈和更深的关系。非IE内核浏览器和IE7及以上浏览器支持，属于CSS2选择符。

　　实例：
　　.test > strong{color:#F00;}
　　<div class="test">
　　　<strong>测试的内容</strong>
　　　<p>这是<strong>测试的内容</strong>哦！</p>
　　　<strong>测试的内容</strong>
　　</div>

相邻选择符(Adjacent Selectors)

　　语法：E1 + E2

　　说明：选择紧跟在对象E1之后的所有E2对象(E1与E2需结构级别相同)。非IE内核浏览器和

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!