| 名稱 | 說明 | #範例 |
| :nth -child(index/even/odd/equation) | 符合其父元素下的第N個子或奇偶元素 ':eq(index)' 只符合一個元素，而這個將為每一個父元素匹配子元素。 :nth-child從1開始的，而:eq()是從0算起的！ 可以使用:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2) | 在每個ul 找出第2 個li:
$("ul li: nth-child(2)") |
| :first-child | #符合第一個子元素 ':first' 只符合一個元素，而此選擇符將為每個父元素匹配一個子元素 | 在每個ul 中尋找第一個li:
$("ul li:first-child ") |
| :last-child | 符合最後一個子元素 ':last'只符合一個元素，而此選擇符將為每個父元素匹配一個子元素
| 在每個ul 中找到最後一個li:
$("ul li:last- child") |
| :only-child | 如果某個元素是父親元素中唯一的子元素，那將會被符合 如果父元素中含有其他元素，那將不會被符合。
| 在ul 中尋找是唯一子元素的li:
$("ul li:only-child") |
註：
1、:nth-child(index)從1開始的，而eq(index)是從0開始的，就是說 $(" ul li:nth-child(0)").css("color","red")是取得不到相符的元素，只能從1開始，即 $("ul li:nth-child(1) ").css("color","red")，而eq(0)可以獲得，同樣都是獲得第一個子元素
:nth-child(even)是獲得偶數子元素，即第二個，第四個，第六個...,而:even則是從索引0開始，匹配第二個索引，第四個索引...,也就是第一個，第三個，第五個...,看起來像都是獲得奇數項，同樣:nth-child(odd)和:odd同樣也是如此
2、 :first-child配對每個父類別的子元素，而:first則是匹配一個子元素， :last-child和last也是這樣
3、only-child:匹配某個元素是父親元素中唯一的子元素，就是說當前子元素是類別中唯一的元素，則符合！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
jQuery(function($){
// $("ul li:first-child").css("color","red");
$("ul li:first").css("color","red");
// $("ul li:last-child").css("color","red");
// $("ul li:nth-child(even)").css("color","red");
// $("ul li:odd").css("color","red");
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul>
<li>第一个元素</li>
<li>第二个元素</li>
<li>第三个元素</li>
<li>第四个元素</li>
<li>第五个元素</li>
<li>第六个元素</li>
</ul>
<ul>
<li>第一个元素</li>
<li>第二个元素</li>
<li>第三个元素</li>
<li>第四个元素</li>
<li>第五个元素</li>
<li>第六个元素</li>
</ul>
</div>
</form>
</body>
</html>
#
下一節