子元素伪类选择器,指的就是选择某一个元素下的子元素。选取子元素,在jQuery最常用的操作之一。在jQuery中,子元素伪类选择有两大类。

  • (1):first-child、:last-child、:nth-child(n)、:only-child
  • (2):first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type

一、: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 选择父元素下唯一的子元素,该父元素只有一个子元素

特别注意一点,:nth-child(n)中的n是从1开始,而不是从0开始的。这是因为jQuery中的:nth-child(n)是完全继承了CSS选择器的规范。

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{padding:0;margin:0;} ul{list-style-type:none;} li{height:20px;} </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("ul li:first-child").css("background-color", "red"); $("ul li:nth-child(2)").css("background-color", "orange"); $("ul li:nth-child(3)").css("background-color", "yellow"); $("ul li:nth-child(4)").css("background-color", "green"); $("ul li:last-child").css("background-color", "blue"); }) </script> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>

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

分析:

想要实现上面的效果,很多初学者首先想到的是为每一个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)")

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

举例:隔行换色

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{padding:0;margin:0;} ul{list-style-type:none;} li{height:20px;} </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { //设置奇数列的背景颜色 $("ul li:nth-child(odd)").css("background-color", "red"); //设置偶数列的背景颜色 $("ul li:nth-child(even)").css("background-color", "green"); }) </script> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>

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

分析:

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

二、: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
E:only-of-type 选择父元素下唯一的E类型的子元素,该父元素可以有多个子元素

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

<div> <h1><h1> <p></p> <span></span> <span></span> </div>

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

h1:first-child:

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

p:first-child:

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

span:first-child:

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

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

h1:first-of-type:

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

p:first-of-type:

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

span:first-of-type:

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