jQuery子元素偽類選擇器

“子元素”偽類選擇器，指的就是選擇某一個元素下的子元素的一種偽類選擇器。選取子元素，是 jQuery 最常用的操作之一。

在 jQuery 中，“子元素”偽類選擇器有以下兩大類。

:first-child、:last-child、:nth-child(n)、:only-child；
:first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type。

:first-child、:last-child、:nth-child(n)、:only-child

第1類“子元素”偽類選擇器的相關說明如表 1 所示。

表 1：“子元素”偽類選擇器（第 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>

程式執行效果如圖 1 所示：

圖 1：每個列表項都有不同樣式