快速业务通道

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

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-02-28

  成天都要与样式打交道的朋友,相信对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 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号