风也温柔

计算机科学知识库

css中的伪类选择器 2.3 子元素伪类选择器

  子元素伪类选择器css中的伪类选择器,指的就是选择某一个元素下的子元素。伪类选择器,相信小伙伴也接触过了css中的伪类选择器 2.3 子元素伪类选择器,最典型的就是超链接的几个伪类:a:link、a:、a:hover、a:。

  在CSS3中,子元素伪类选择器有两大类。

  一、:first-child、:last-child、:nth-child(n)、:only-child子元素伪类选择器(第1类)选择器说明

  E:first-child

  选择父元素下的第一个子元素(该子元素类型为E,以下类同)

  E:last-child

  选择父元素下的最后一个子元素

  E:nth-child(n)

  选择父元素下的第n个子元素或奇偶元素,n取值有3种:数字、odd和even,其中n从1开始

  E:only-child

  选择父元素下唯一的子元素,该父元素只有一个子元素

  举例:每个列表项都有不同样式

  <pre>在线测试`




    *{padding:0;margin:0;}
    ul{list-style-type:none;}
    ul li
    {
        height:20px;
    }
    ul li:first-child{background-color:red;}
    ul li:nth-child(2){background-color:orange;}
    ul li:nth-child(3){background-color:yellow;}
    ul li:nth-child(4){background-color:green;}
    ul li:last-child{background-color:blue;}

`</pre>

  浏览器预览效果如下图所示。

  css的伪类中hover属性_css中的伪类选择器_css中伪类特点

  分析:

  想要实现上面同样的效果,很多初学者首先想到的是为每一个li元素都添加id或class来实现。但是这样会导致id和class泛滥,不利于网站后期的维护。而使用子元素伪类选择器,可以让结构与样式分离,使得HTML结构更加清晰,更利于后期维护和搜索引擎优化(即SEO)。

  在这个例子中,“ul li:first-child{}”表示选择父元素(即ul)下的第一个子元素,这句代码等价于“ul li:nth-child(1){}”。“ul li:last-child{}”表示选择父元素(即ul)下的最后一个子元素,这句代码等价于“ul li:nth-child(5){}”。

  在实际开发中,子元素伪类选择器特别适合操作列表的不同样式,像绿叶学习网中就大量用到,如下图所示。

  css中的伪类选择器_css中伪类特点_css的伪类中hover属性

  举例:隔行换色

  <pre>在线测试`




    *{padding:0;margin:0;}
    ul{list-style-type:none;}
    ul li{ height:20px;}
    /*设置奇数列的背景颜色*/
    ul li:nth-child(odd)
    {
        background-color:red;
    }
    /*设置偶数列的背景颜色*/
    ul li:nth-child(even)
    {
        background-color:green;
    }

`</pre>

  浏览器预览效果如所示。

  分析:

  隔行换色效果也很常见,例如下表所示。

  css中伪类特点_css的伪类中hover属性_css中的伪类选择器

  二、:first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type

  :first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type和:first-child、:last-child、:nth-child(n)、:only-child,这两类子元素伪类选择器看起来非常相似,但是两者其实是有着本质上的区别的。

  子元素伪类选择器(第2类)选择器说明

  E:first-of-type

  选择父元素下的第一个E类型的子元素

  E:last-of-type

  选择父元素下的最后一个E类型的子元素

  E:nth-of-type(n)

  选择父元素下的第n个E类型的子元素或奇偶元素,n取值有3种:数字、odd和even,n从1开始

  E:only-of-type

  选择父元素下唯一的E类型的子元素,该父元素可以有多个子元素

  对于上面的解释,大家可能觉得比较难理解,我们先来看一个简单的例子:

  

  对于:first-child来说,我们可以得到以下结果。

  h1:first-child:

  选择的是h1,因为父元素(即div)下的第一个子元素就是h1。

  p:first-child:

  选择不到任何元素,因为父元素(即div)下的第一个子元素是h1,不是p。

  span:first-child:

  选择不到任何元素css中的伪类选择器,因为父元素(即div)下的第一个子元素是h1,不是span。

  对于:first-of-type来说,我们可以得到以下结果。

  h1:first-of-type:

  选择的是h1,因为h1是父元素中h1类型的子元素,然后我们选择第一个h1(实际上也只有一个h1)。

  p:first-of-type:

  选择的是p,因为p是父元素中p类型的子元素,然后我们选择第一个p(实际上也只有一个p)。

  span:first-of-type:

  选择的是第一个span,因为span是父元素中span类型的子元素,我们选择第一个span。

  从上面这个例子我们可以知道::first-child在选择父元素下的子元素时,不仅要区分元素类型,还要求是第一个子元素。而:first-of-type在选择父元素下的子元素时,只需要区分元素类型,不要求是第一个子元素实际上,:last-child和:last-of-type、:nth-child(n)和:nth-of-type(n)、:only-child和:only-of-type这几个的区别都是相似的,在此不再赘述。

  大多数初学的小伙伴很容易将这两类伪类选择器搞混。不过大家不用担心,在实际开发中,一般情况下只会用到第一类子元素伪类选择器。也就是说,我们认真把第一类子元素伪类选择器掌握好就可以了。

  到这里,大家可能已经感觉到到本书的特别之处了。在这本书中,我们会根据实际应用在各个章节中给大家穿插各种小技巧。更重要的是,我们会告诉读者哪些知识该记忆,哪些压根儿用不上,这样大大提高了读者的学习效率。因为作者我嘛,曾经也是深受其害,当初学习都是一头扎进去,什么都学,过一段时间又忘记,然后又接着回去复习。到最后自己大量实践的时候,发现很多记忆的知识点其实是用不上的,白白浪费了大量时间和精力。希望我的这些心血与经验,能够换取大家宝贵的时间。生命是短暂的,由不得我们奢侈地挥霍。

  文章来源:http://www.lvyestudy.com/css3/child-selector