实例解析CSS选择符及其用法

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

我们是2013年至今的成都网站建设公司,提供网站建设,电商网站设计开发,成都外贸网站制作,响应式网页设计,小程序设计、等服务。为客户创造有价值的品牌营销体验，让互联网提升企业的竞争力！

CSS选择符的用法和实例

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

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

类型选择符(TypeSelectors)

　　语法：E1

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

　　实例：

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

包含选择符(DescendantSelectors)

　　语法：E1E2

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

　　实例：

 
 
 
    
  
  
  
  1. 　　divem{color:#F00;} 
    2. 
  
  
  
  2. 　　.testem{color:#F00;} 
    3. 
  
  
  
  3. 　　
    这里是测试内容
    4. 
  
  
  
  4. 　　这里是测试内容

  • ID选择符(IDSelectors)

    　　语法：#sID

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

    　　实例：

     
 
 
      
  
  
  
    1. 　　#test{color:#F00;} 
      2. 
  
  
  
    2. 　　这里是测试内容

  • 类选择符(ClassSelectors)

    　　语法：.className

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

    　　实例：

     
 
 
      
  
  
  
    1. 　　.test{color:#F00;} 
      2. 
  
  
  
    2. 　　.test2{font-size:14px;} 
      3. 
  
  
  
    3. 　　这里是测试内容
  • 　　这里是测试内容

  • #p#分组选择符(GroupingSelectors)

    　　语法：E1,E2,E3

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

    　　实例：

     
 
 
      
  
  
  
    1. 　　.test,p{color:#F00;} 
      2. 
  
  
  
    2. 　　这里是测试内容
      3. 
  
  
  
    3. 　　
      这里是测试内容
      4. 
  
  
  
    4.

    通配选择符(UniversalSelectors)

    　　语法：*

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

    　　实例：

     
 
 
      
  
  
  
    1. 　　*{color:#F00;} 
      2. 
  
  
  
    2. 　　
      这里是测试内容
      3. 
  
  
  
    3. 　　
      这里是测试内容
      4. 
  
  
  
    4.

    子选择符(ChildSelectors)

    　　语法：E1>E2

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

    　　实例：

     
 
 
      
  
  
  
    1. 　　.test>strong{color:#F00;} 
      2. 
  
  
  
    2. 　　
      3. 
  
  
  
    3. 　　　测试的内容
      4. 
  
  
  
    4. 　　　
      这是测试的内容哦！
      5. 
  
  
  
    5. 　　　测试的内容
      6. 
  
  
  
    6. 　　
      7.

    相邻选择符(AdjacentSelectors)

    　　语法：E1+E2

    　　说明：选择紧跟在对象E1之后的所有E2对象(E1与E2需结构级别相同)。非IE内核浏览器和IE7及以上浏览器支持，属于CSS2选择符。

    　　实例：

     
 
 
      
  
  
  
    1. 　　p+p{color:#F00;} 
      2. 
  
  
  
    2. 　　
      测试的内容1
      3. 
  
  
  
    3. 　　
      测试的内容2
      4. 
  
  
  
    4. 　　
      测试的内容3
      5. 
  
  
  
    5. 　　
      测试的内容4
      6. 
  
  
  
    6. 　　
      测试的内容5
      7. 
  
  
  
    7. 　　
      测试的内容6
      8. 
  
  
  
    8.

    #p#属性选择符(AttributeSelectors)

    　　语法：（CSS选择符中的属性选择符具体再分为4种不同的表现方式）

    　　1.E1[attr]
    　　2.E1[attr=value]
    　　3.E1[attr~=value]
    　　4.E1[attr|=value]

    　　说明：

    　　1.选择具有attr属性的E1

    　　2.选择具有attr属性且属性值等于value的E1

        　3.选择具有attr属性且属性值为一用空格分隔的字词列表，其中一个等于value的E1。

    　　4.选择具有attr属性且属性值为一用连字符分隔的字词列表，由value开始的E1

    　　非IE内核浏览器和IE7及以上浏览器支持，属于CSS2选择符。

    　　实例：

     
 
 
      
  
  
  
    1. 　　div[title]{color:#f00;} 
      2. 
  
  
  
    2. 　　测试的内容
      3. 
  
  
  
    3. 
  
  
  
    4. 　　div[class=a]{color:#f00;} 
      5. 
  
  
  
    5. 　　测试的内容
      6. 
  
  
  
    6. 　　测试的内容
      7. 
  
  
  
    7. 
  
  
  
    8. 　　div[class~=a]{color:#f00;} 
      9. 
  
  
  
    9. 　　测试的内容
      10. 
  
  
  
    10. 　　测试的内容
      11. 
  
  
  
    11. 
  
  
  
    12. 　　div[title|=a]{color:#f00;} 
      13. 
  
  
  
    13. 　　测试的内容
      14. 
  
  
  
    14. 　　测试的内容
      15. 
  
  
  
    15. 　　测试的内容
      16. 
  
  
  
    16.

     伪类选择符(CSSPseudo-ClassesReference)

    　　语法：（CSS选择符中的伪类选择符共有10种）

    　　1.Selector:link{sRules}
    　　2.Selector:visited{sRules}
    　　3.Selector:hover{sRules}
    　　4.Selector:active{sRules}
    　　5.Selector:focus{sRules}
    　　6.Selector1Selector2:first-child{sRules}
    　　7.Selector:first{sRules}
    　　8.Selector:left{sRules}
    　　9.Selector:right{sRules}
    　　10.Selector:lang{sRules}

    　　说明：

    　　1.设置a对象在未被访问前的样式表属性。默认值由浏览器决定。对于无href属性（特性）的a对象，此伪类不发生作用。

    　　2.设置a对象在其链接地址已被访问过时的样式表属性。默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。对于无href属性（特性）的a对象，此伪类不发生作用。

    　　3.设置对象在其鼠标悬停时的样式表属性。在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。

    　　4.设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。并且:active状态可以和:link以及:visited状态同时发生。

    　　5.设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式表属性。

    　　6.设置对象（Selector1）的***个子对象（Selector2）的样式表属性。

    　　7.设置页面容器***页使用的样式表属性。仅用于@page规则。

    　　8.设置页面容器位于装订线左边的所有页面使用的样式表属性。仅用于@page规则。

    　　9.设置页面容器位于装订线右边的所有页面使用的样式表属性。仅用于@page规则。

    　　10.设置对象使用特殊语言的内容样式表属性。
    　　
    　　:link,:visited,:hover,:active属于CSS1，目前所有主流浏览器均支持a对象的该4种伪类选择符，非IE浏览器和IE7及以上浏览器还支持非a对象的:hover,:active；:focus,:lang属于CSS2，非IE核心浏览器及IE8支持。

    　　实例：

     
 
 
      
  
  
  
    1. 　　a:link{color:#f00;} 
      2. 
  
  
  
    2. 　　a:visited{color:#666;} 
      3. 
  
  
  
    3. 　　a:hover{color:#F60;text-decoration:none;} 
      4. 
  
  
  
    4. 　　a:active{color:#000;} 
      5. 
  
  
  
    5. 　　css探索之旅
      6. 
  
  
  
    6. 
  
  
  
    7. 　　input:focus,a:focus{background:#f00;
      8. 
  
  
  
    8. /*点击或按TAB键获得焦点时生效*/} 
      9. 
  
  
  
    9. 　　css探索之旅
      10. 
  
  
  
    10. 　　
      11. 
  
  
  
    11. 
  
  
  
    12. 　　divem:first-child{color:#f00;} 
      13. 
  
  
  
    13. 　　
      web前端开发权威指南
      14. 
  
  
  
    14.

    #p#伪对象选择符(CSSPseudo-ElementsReference)

    　　语法：（CSS选择符中的伪对象选择符共有4种）

    　　1.Selector:first-letter
    　　2.Selector:first-line
    　　3.Selector:before
    　　4.Selector:after

    　　说明：

    　　1.设置对象内的***个字符的样式表属性。此伪对象仅作用于块元素。内联元素要使用该伪对象，必须先设定对象具有块元素的表状。

    　　2.设置对象内的***行的样式表属性。此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先设定对象具有块元素的表状。

    　　3.用来和content属性一起使用，设置在对象前（依据对象树的逻辑结构）发生的内容。

    　　4.用来和content属性一起使用，设置在对象后（依据对象树的逻辑结构）发生的内容。

    　　这几个伪对象选择符都为属于CSS2选择符，其中:first-letter和:first-line目前所有主流浏览器均支持；:before和:after非IE核心浏览器及IE8支持。

    　　实例：

     
 
 
      
  
  
  
    1. 　　div:first-letter{color:#f00;} 
      2. 
  
  
  
    2. 　　
      我是一只丑小鸭，伊啊伊啊哟
      3. 
  
  
  
    3. 
  
  
  
    4. 　　div:first-line{color:#f00;} 
      5. 
  
  
  
    5. 　　
      我是一只丑小鸭，伊啊伊啊哟
      6. 
  
  
  
    6. 
  
  
  
    7. 　　div:before{content:"web";} 
      8. 
  
  
  
    8. 　　
      前端开发
      9. 
  
  
  
    9. 
  
  
  
    10. 　　div:after{content:"...";} 
      11. 
  
  
  
    11. 　　
      大段的文字
      12.

    网页标题：实例解析CSS选择符及其用法
    文章源于：http://www.mswzjz.cn/qtweb/news12/2662.html

    攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

    贝锐智能技术为您推荐以下文章

    网站营销知识

    分类信息网站

    重庆教育培训网站建设　　 　软文推广公司　　 　四川LED亮化工程　　 　LED亮化工程　　 　四川成都网站设计　　 　虚拟主机购买　　 　西部信息中心　　 　成都茶叶销售　　 　南宁旺客科技　　 　四川平武网站建设　　 　南充电信机房托管　　 　成都画册制作　　 　IOS开发　　 　成都西云机房　　 　ios开发　　 　成都木托盘　　 　泸县网站建设　　 　网络口碑营销　　 　雅安做网站　　 　腾讯云香港空间