| Nama | Penerangan | Contoh |
| :nth-child(index/even/odd/equation) | | 名称 | 说明 | 举例 | | :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") |
Padankan elemen induknya Anak ke-N atau elemen ganjil-genap di bawah <🎜><🎜>':eq(index)' hanya sepadan dengan satu elemen dan ini akan sepadan dengan elemen anak untuk setiap elemen induk. :nth-child bermula dari 1, dan :eq() bermula dari 0! <🎜><🎜>Boleh digunakan: <🎜>anak ke-nth(genap) <🎜>:anak ke-nth(ganjil) <🎜>:anak-ke-ke-3(3n) <🎜>:anak-ke-2(2) < 🎜 >:nth-child(3n+1) <🎜>:nth-child(3n+2)<🎜> | Cari li ke-2 dalam setiap ul: <🎜>$("ul li:nth-child(2)") |
| :first-child | < 🎜>Padankan elemen anak pertama<🎜><🎜>':first' hanya sepadan dengan satu elemen dan pemilih ini akan memadankan satu elemen anak untuk setiap elemen induk<🎜> | Cari li pertama dalam setiap ul: <🎜>$("ul li:first-child") | < /tr>
< td width="193" valign="top" style="word-break: break-all;">:anak terakhir| <🎜>padanan dengan elemen anak terakhir<🎜><🎜>':last' hanya sepadan dengan satu elemen dan pemilih ini akan memadankan satu anak untuk setiap elemen induk Elemen <🎜><🎜><🎜 ><🎜> | Cari yang terakhir dalam setiap ul li: <🎜>$("ul li :last-child") |
| :anak-sahaja | <🎜>Jika elemen ialah satu-satunya elemen anak bagi elemen induk , itu akan dipadankan <🎜><🎜 > Jika elemen induk mengandungi elemen lain, ia tidak akan dipadankan. <🎜><🎜><🎜><🎜> | Cari satu-satunya elemen anak dalam ul li: <🎜>$("ul li:only-child") |
Nota:
1 :nth-child(index) bermula dari 1, dan eq(index) bermula dari 0, iaitu $(" ul. li:nth-child(0)").css("color","red") tidak boleh mendapatkan elemen padanan dan hanya boleh bermula dari 1, iaitu $("ul li:nth-child(1) ").css ("warna","merah"), dan eq(0) boleh diperolehi, perkara yang sama adalah untuk mendapatkan elemen anak pertama
:nth-child(even) ialah untuk mendapatkan nombor genap elemen anak , Iaitu, kedua, keempat, keenam..., dan :even bermula dari indeks 0, sepadan dengan indeks kedua, indeks keempat..., iaitu, pertama, ketiga, Kelima..., ia Nampaknya mereka semua mendapat bilangan item yang ganjil, perkara yang sama berlaku untuk :nth-child (ganjil) dan :odd
2 :first-child sepadan dengan elemen anak setiap kelas induk , dan :first sepadan dengan elemen anak, dan perkara yang sama berlaku untuk :last-child dan last
3. only-child: memadankan elemen yang merupakan satu-satunya elemen anak dalam elemen induk, iaitu elemen anak semasa ialah Satu-satunya elemen dalam kelas sepadan!
<!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>
bahagian seterusnya