子元素偽類選擇器，就是選擇某一個元素下面的子元素的方式。選擇子元素，在jQuery中是很常用的操作。jQuery為我們提供了大量選擇子元素的方式，使得我們操作元素更加的方便快捷。
在jQuery中，子元素偽類選擇器分為2大類。
下面我們通過幾個實例，來讓大家深刻地理解這些選擇器。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
ul
{
display:inline-block;
width:200px;
list-style-type:none;
}
li{height:20px;}
</style>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("ul li:first").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").css("background-color", "blue");
})
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
在浏覽器預覽效果如下：
分析：
$("ul li:first")表示選擇ul元素下的第1個li元素。其實$("ul li:first")也等價於$("ul li:nth-child(1)")。$("ul li:last")表示選擇ul元素下的最後一個元素，在這個例子中也等價於$("ul li:nth-child(5)")。
沒有接觸子元素偽類選擇器的同學，如果要操作某一個元素的子元素，往往都是給該子元素添加一個id或者class。但是這樣會導致id或class泛濫成災，影響HTML結構，使得代碼難以維護。不過有了子元素偽類選擇器，我們可以輕松地進行選擇操作。
學過CSS3的小伙伴就會問了，上面的效果用CSS操作豈不是來得更簡單些？廢話，當然是啦。大家在後面的學習中，特別是入門階段的實例，很多時候我們重在講解知識概念，而不會在乎哪個方法更好。如果實例能夠幫助大家理解該知識點，目的就達到了。對於知識的實踐部分，我們都會在進階教程都會介紹，大家不用擔心。此外，關於CSS3的學習，大家可以關注我們的CSS3教程。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
ul
{
display:inline-block;
width:200px;
list-style-type:none;
}
li{height:20px;}
</style>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
//設置奇數列的背景顏色
$("ul li:nth-child(odd)").css("background-color", "red");
//設置偶數列的背景顏色
$("ul li:nth-child(even)").css("background-color", "red");
})
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
在浏覽器預覽效果如下：
分析：
$("ul li:nth-child(odd)")表示選擇ul元素下奇數的li元素，$("ul li:nth-child(even)")表示選擇ul元素下偶數的li元素。
對於這些選擇器，我們一定要結合實例來理解其定義。其實，這2類子元素偽類選擇器在形式上非常相似的，但是卻有著本質上的區別。
“第1類選擇器不分元素類型，第2類選擇器區分元素類型。”大家一定要記住這句話，對於你區分和理解這2類選擇器極其重要。除此之外，我們仔細觀察會發現，第2類選擇器的命名上都有一個“type”（元素類型），這還給我們帶來了一個記憶小技巧。
下面我們通過具體實例，來幫助大家真正去理解這2類子元素偽類選擇器。
<div>
<h1></h1>
<p></p>
<span></span>
<span></span>
</div>
h1:first-child：選擇的是h1元素，因為h1元素是div的第1個子元素。
p:first-child：選擇不到任何元素，因為p並不是div的第1個子元素，而是div的第2個子元素。
span:first-child:選擇不到任何元素，因為span並不是div的第1個子元素，而是div的第3個子元素；
h1: first-of-type:選擇的是h1元素，因為h1元素是div中所有h1元素中的第1個h1元素，事實上也只有一個為h1的子元素。
p: first-of-type:選擇的是p元素，因為p元素是div中所有p元素中的第1個p元素，事實上也只有一個為p的子元素。
span: first-of-type:選擇的是id="first"的span元素，因為在div元素中有2個span元素，這裡我們選擇的是兩個span中的第1個。
總結：
①“:first-child”是選擇父元素下的第1個子元素（不區分元素類型），而“:first-of-type”是選擇父元素下某個元素類型的第1個子元素（區分元素類型）；
②“:last-child”和“:last-of-type”、“nth-child（n）”和“:nth-of-type（n）”的使用原理跟“:first-child”和“:first-of-type”是一樣的，大家試著想一下另外幾個用在這個例子上的區別。
在“:only-child選擇器”中，父元素是只有一個子元素的。但是在“:only-of-type選擇器”中，卻可以有多個子元素。“:only-of-type”相對“:only-child”來說，只是多了一個type（元素類型）的限制。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/*去除所有元素默認外邊距以及內邊距*/
*{padding:0;margin:0;}
</style>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("div p:only-child").css("background-color", "red");
})
</script>
</head>
<body>
<div>
<p>這是一個段落</p>
</div>
<div>
<p>這是一個段落</p>
<span>這是一個span</span>
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
對於“:only-child選擇器”來說，其父元素下面只能有一個子元素。在這個例子中，第1個div元素內部只有一個子元素，因此被選中。第2個div元素有2個子元素（p和span），因此沒有被選中。
當我們把$("div p:only-child")改為$("div p:only-of-type")時，在浏覽器預覽效果如下，大家仔細琢磨一下原因。
子元素偽類選擇器在實際開發中，是用得非常多的。好些新人剛剛學習，覺得很煩，經常跳躍性地學習，或者看兩眼好像懂了就過了。大家在看別人的書籍的時候這樣做，俺不管。但是對於 這一套教程，這是一個大忌。因為對於教程內容，我都是精益求精，沒用的東西我不會扯那麼多，但是非常重要的知識，我會一再提醒。