La règle de filtrage du filtre d'élément enfant est d'obtenir l'élément correspondant via la relation entre l'élément parent et l'élément enfant.
$('li:first-child').css('background', '#ccc'); //每个父元素第一个li 元素
$('li:last-child').css('background', '#ccc'); //每个父元素最后一个li 元素
$('li:only-child').css('background', '#ccc'); //每个父元素只有一个li 元素
$('li:nth-child(odd)').css('background', '#ccc'); //每个父元素奇数li 元素
$('li:nth-child(even)').css('background', '#ccc'); //每个父元素偶数li 元素
$('li:nth-child(2)').css('background', '#ccc'); //每个父元素第三个li 元素
Nous savons utiliser
:first
Le sélecteur de filtre peut obtenir le premier élément enfant de l'élément parent spécifié, mais ce sélecteur ne renvoie qu'un seul élément, pas une collection, et utilise
:first-child
Le sélecteur de filtre d'élément enfant peut obtenir le premier élément enfant renvoyé dans chaque élément parent. Il s'agit d'une collection et est couramment utilisé pour le traitement de sélection de plusieurs données de collection.
Comme indiqué ci-dessous, si vous souhaitez obtenir le premier li de chaque ul de la page et changer sa couleur. Ensuite, vous pouvez utiliser
: first-child
<body>
<h3>该百年额米格“蔬菜水果”中第一行的文字颜色</h3>
<ul>
<li>芹菜</li>
<li>茄子</li>
<li>萝卜</li>
<li>大白菜</li>
<li>西红柿</li>
</ul>
<ul>
<li>橘子</li>
<li>香蕉</li>
<li>葡萄</li>
<li>苹果</li>
<li>西瓜</li>
</ul>
</body>
<script type="text/javascript">
$("li:first-child").css("color", "red");
</script>
L'effet affiché dans le navigateur :
Réussi
$("li:first-child")
obtient le premier élément
css()
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
