本文详细讲解jQuery中子元素过滤选择器的用法，重点区分:first与:first-child的区别。:first仅返回首个匹配元素，而:first-child返回每个父元素下的第一个子元素集合。通过实例演示如何获取每个ul中第一个li并修改样式，帮助开发者准确掌握集合选择技巧。
子元素过滤选择器基础
子元素过滤器的核心逻辑在于依据父元素与子元素之间的层级关系来定位目标元素。
$('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的区别
在jQuery中，
: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")
选择器语法，代码成功定位了两个<ul>父容器下的第一个<li>子元素，并调用
css()
方法对其文本颜色进行了修改。