자식 요소 필터의 필터링 규칙은 상위 요소와 하위 요소 간의 관계를 통해 해당 요소를 구하는 것입니다.
$('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 元素
우리는 사용법을 알고 있습니다
:first
필터 선택기는 지정된 상위 요소에서 첫 번째 하위 요소를 가져올 수 있지만 이 선택기는 컬렉션이 아닌 요소 하나만 반환하고
을 사용합니다.
:first-child
하위 요소 필터 선택기는 각 상위 요소에서 반환된 첫 번째 하위 요소를 얻을 수 있는 컬렉션이며 일반적으로 여러 컬렉션 데이터의 선택 처리에 사용됩니다.
아래와 같이 페이지의 각 ul에서 첫 번째 li을 가져와서 색상을 변경하려는 경우입니다. 그런 다음
을 사용할 수 있습니다.: 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>
브라우저에 표시되는 효과:
합격
$("li:first-child")
선택기 코드는 두 개의
css()
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
