“子元素”伪类选择器 - jQuery

子元素伪类选择器，指的就是选择某一个元素下的子元素。选取子元素，在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类型的子元素，我们选择其中第一个。