jQuery子元素过滤选择器详解：:first-child与:first的区别

作者：桌面漫游时间：2026-10-30 05:33:11浏览：629

本文详细讲解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()

方法对其文本颜色进行了修改。

作者最新文章

Mock.js 拦截失效或数据格式错误的常见原因及排查

2026-11-05 10:11:59

Java和JavaScript名字像但没关系：辨析Java、JavaWeb与JS

2026-11-04 09:30:54

CodePen、JSFiddle与RunJS对比：哪款JS在线运行工具更适合你？

2026-11-03 16:46:57

JS 统计图渲染空白或报错怎么排查？常见问题解决指南

2026-11-03 09:49:40

flv.js 常见报错 MediaError 与解码失败排查指南

2026-11-02 10:29:29