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

　　成天都要与样式打交道的朋友，相信对CSS选择符(CSS Selectors)都不会陌生。不过对于刚接触或者还不是很熟悉css的朋友来说，能够找到一份对于CSS选择符的相关例子集合，还是会有一定帮助的。

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

　　做这之前，当然得将所有CSS选择符列出来先。

CSS选择符(CSS Selectors - CSS1 and CSS2)

• 类型选择符(Type Selectors)　CSS1
• 包含选择符(Descendant Selectors)　CSS1
• ID选择符(ID Selectors)　CSS1
• 类选择符(Class Selectors)　CSS1
• 分组选择符(Grouping Selectors)　CSS1
• 通配选择符(Universal Selectors)　CSS2
• 子选择符(Child Selectors)　CSS2
• 相邻选择符(Adjacent Selectors)　CSS2
• 属性选择符(Attribute Selectors)
  • E1[attr]　CSS2
  • E1[attr=value]　CSS2
  • E1[attr~=value]　CSS2
  • E1[attr|=value]　CSS2
• 伪类选择符(CSS Pseudo-Classes Reference)
  • :link　CSS1
  • :visited　CSS1
  • :hover　CSS1
  • :active　CSS1
  • :focus　CSS2
  • :first-child　CSS2
  • :first　CSS2
  • :left　CSS2
  • :right　CSS2
  • :lang　CSS2
• 伪对象选择符(CSS Pseudo-Elements Reference)
  • :first-letter　CSS2
  • :first-line　CSS2
  • :before　CSS2
  • :after　CSS2

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

类型选择符(Type Selectors)

　　语法：E1

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

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

包含选择符(Descendant Selectors)

　　语法：E1 E2

　　说明：选择所有被E1包含的E2，这里的E1和E2即可以是html标记，也可以是class

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