| Nom | Description | Exemple |
| :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") |
Faire correspondre son élément parent Le Nième élément enfant ou impair-pair sous <🎜><🎜>':eq(index)' ne correspond qu'à un seul élément, et cela correspondra à l'élément enfant de chaque élément parent. :nth-child commence à 1 et :eq() commence à 0 ! <🎜><🎜>Peut être utilisé : <🎜>nth-child(pair) <🎜>:nth-child(impair) <🎜>:nth-child(3n) <🎜>:nth-child(2) < 🎜 >:nth-child(3n+1) <🎜>:nth-child(3n+2)<🎜> | Trouvez le 2ème li dans chaque ul : <🎜>$("ul li:nth-child(2)") |
| :premier-enfant | < 🎜>Faire correspondre le premier élément enfant<🎜><🎜>':first' ne correspond qu'à un seul élément, et ce sélecteur correspondra à un élément enfant pour chaque élément parent<🎜> | Trouvez le premier li dans chaque ul : <🎜>$("ul li:first-child") | < /tr>
< td width="193" valign="top" style="word-break: break-all;">:dernier-enfant| <🎜>correspond au dernier élément enfant<🎜><🎜>':last' ne correspond qu'à un seul élément, et ce sélecteur correspondra à un enfant pour chaque élément parent Element <🎜><🎜><🎜 ><🎜> | Trouvez le dernier dans chaque ul li : <🎜>$("ul li :last-child") |
| :only-child | <🎜>Si un élément est le seul élément enfant de l'élément parent, cela correspondra <🎜><🎜 > Si l'élément parent contient d'autres éléments, il ne sera pas mis en correspondance. <🎜><🎜><🎜><🎜> | Trouvez le seul élément enfant dans ul li : <🎜>$("ul li:enfant unique") |
Remarque :
1 :nth-child(index) commence à 1, et eq(index) commence à 0, c'est-à-dire $(" ul. li:nth-child(0)").css("color","red") ne peut pas obtenir les éléments correspondants et ne peut commencer qu'à partir de 1, c'est-à-dire $("ul li:nth-child(1) ").css ("color", "red"), et eq(0) peut être obtenu, la même chose est d'obtenir le premier élément enfant
:nth-child(even) est d'obtenir le nombre pair d'éléments enfants , C'est-à-dire le deuxième, le quatrième, le sixième..., et :even commence à partir de l'index 0, correspondant au deuxième index, le quatrième index..., c'est-à-dire le premier, le troisième, Le cinquième..., il Il semble qu'ils reçoivent tous un nombre impair d'éléments, il en va de même pour :nth-child (impair) et :odd
2 :first-child correspond aux éléments enfants de chaque classe parent, et :first. correspond à un élément enfant, et il en va de même pour :last-child et last
3. only-child : correspond à un élément qui est le seul élément enfant de l'élément parent, c'est-à-dire que l'élément enfant actuel est Le seul élément de la classe correspond !
<!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>
section suivante