Die Filterregel des untergeordneten Elementfilters besteht darin, das entsprechende Element durch die Beziehung zwischen dem übergeordneten Element und dem untergeordneten Element zu erhalten.
$('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 元素
Wir wissen, wie man es verwendet
:first
Der Filterselektor kann das erste untergeordnete Element im angegebenen übergeordneten Element abrufen, dieser Selektor gibt jedoch nur ein Element zurück, keine Sammlung, und verwendet
:first-child
Der Filterselektor für untergeordnete Elemente kann das erste untergeordnete Element abrufen, das in jedem übergeordneten Element zurückgegeben wird. Es handelt sich um eine Sammlung und wird häufig für die Auswahlverarbeitung mehrerer Sammlungsdaten verwendet.
Wie unten gezeigt, wenn Sie das erste Li in jeder UL auf der Seite erhalten und seine Farbe ändern möchten. Dann können Sie
verwenden: 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>
Der im Browser angezeigte Effekt:
Bestanden
$("li:first-child")
-Selektorcode ruft das erste
css()
ändert die Textfarbe, die auf der Seite angezeigt wird.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
