189 8069 5689

CSS3的first-child选择器的用法

本篇内容主要讲解“CSS3的first-child选择器的用法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS3的first-child选择器的用法”吧!

创新互联从2013年成立,是专业互联网技术服务公司,拥有项目成都做网站、成都网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元金牛做网站,已为上家服务,为金牛各地企业和个人服务,联系电话:13518219792


CSS 中的 :first-child Selector 可以选择到特定元素的第一组物件(同一个 parent)
HTML

XML/HTML Code复制内容到剪贴板

    •   

    •     

    • 1
    •   

    •     

    • 2
    •   

    •     

    • 3
    •   

      


  1.   

    •   

    •     

    • 1
    •   

    •     

    • 2
    •   

    •     

    • 3
    •   

      

CSS

CSS Code复制内容到剪贴板

  1. // 只套用编号 1 的 li   

  2. li:first-child {   

  3.     color: green;   

  4. }  

first-child和:first-of-child的区别
假如我们有这样的一段HTML代码:

XML/HTML Code复制内容到剪贴板

  1.   

  2.     

    第1个元素

      

  3.     

    第2个元素

      

  4.     第3个元素  

  5.     第4个元素  

  

CSS选择器:
我们要查找其中的元素,如果使用下面的定义方法——
p:first-child  匹配到的是p元素,因为p元素是div的第一个子元素;
h2:first-child  匹配不到任何元素,因为在这里h2是div的第二个子元素,而不是第一个;
span:first-child  匹配不到任何元素,因为在这里两个span元素都不是div的第一个子元素;
:first-child  匹配到的是p元素,因为在这里div的第一个子元素就是p。
上面应用的样式,有两个是匹配不到的,但是别慌张,CSS中还定义了:first-of-child伪类,请看他的用法和讲解:
p:first-of-type  匹配到的是p元素,因为p是div的所有为p的子元素中的第一个,事实上这里也只有一个为p的子元素;
h2:first-of-type  匹配到的是h2元素,因为h2是div的所有为h2的子元素中的第一个,事实上这里也只有一个为h2的子元素;
span:first-of-type  匹配到的是第三个子元素span。这里div有两个为span的子元素,匹配到的是第一个。
:first-of-type  匹配到的是p元素
总结:
:first-child 匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。
:first-of-type 匹配的是该类型的第一个,类型是指什么呢,就是冒号前面匹配到的东西,比如 p:first-of-type,就是指所有p元素中的第一个。这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了,当然这些元素的范围都是 属于同一级的,也就是同辈的。
同样类型的选择器 :last-child  和 :last-of-type、:nth-child(n)  和  :nth-of-type(n) 也可以这样去理解。


IE的兼容型问题
先看如下一段代码,HTML部分:

XML/HTML Code复制内容到剪贴板

  1.   

  2.     

  3. aa
  4.   

  5.     

  6. bb
  7.   

  8.     

  9. cc
  10.   

  11.     

  12. dd
  13.   

  14.   

CSS部分:

CSS Code复制内容到剪贴板

  1. .example li{float:left;margin-left:10px;}  

如果需要将第一个li的margin-left设为0px,则可以通过下面这个方法实现:

CSS Code复制内容到剪贴板

  1. .example li{float:left;margin-left:10px;}   

  2. .example li:first-child{margin-left:0;}  

然而,IE6不支持:child-first方法,因此我们需要使用表达式从来实现IE6也支持:child-first,代码如下:

CSS Code复制内容到剪贴板

  1. .example li{float:left; margin-left:10px; _margin-left:expression(this.previousSibling==null?'0px':'10px');}   

  2. .example li:first-child{margin-left:0;}  

当然,我们也可以给第一个li添加一个class来重新定义margin-left,如果说是静态页面这样做还可以,如果说程序需要循环输出li的话使用child-first会好些,至少可以使程序少做一条判断。

到此,相信大家对“CSS3的first-child选择器的用法”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


当前标题:CSS3的first-child选择器的用法
分享URL:http://cdxtjz.cn/article/iecggc.html

其他资讯