在处理列表、表格行或任何重复的 HTML 结构时，按元素在父容器中的位置来筛选是一个常见的需求。jQuery 的 :nth-child() 选择器正是为此设计的——它根据元素在兄弟节点中的索引位置来匹配，忽略元素的具体类型，只看它在同辈中的排位。
:nth-child() 的索引计数从 1 开始，这一点和 :eq() 等从 0 开始的方法不同。如果你从 JavaScript 数组索引的习惯迁移过来，需要特别注意这个计数方式的差异，否则很容易定位错元素。
为什么在需要按类型筛选时我更倾向于用 :nth-of-type 而不是 :nth-child？
:nth-child() 在计算位置时会统计所有类型的兄弟元素。假设你有一个 div，里面包含 h2、p、p、h2 四个元素，用 p:nth-child(2) 可以选中第一个 p（因为它在所有子元素中排第 2），但 p:nth-child(1) 什么都不会选中，因为第 1 个子元素是 h2 而不是 p。这种逻辑有时会造成困扰。当你的目标是“选中第 N 个特定类型的元素”时，:nth-of-type 只统计同类型兄弟元素，逻辑更直观。了解这两个选择器的区别，可以避免不少选择器不生效的疑惑。
语法
$("selector:nth-child(n|odd|even|formula)")
参数说明：
-
n：整数，表示要匹配的子元素索引值。索引从 1 开始计数。
-
odd：关键字，匹配所有奇数位置的子元素（第 1、3、5……个）。
-
even：关键字，匹配所有偶数位置的子元素（第 2、4、6……个）。
-
formula：数学表达式，格式为
an+b（a 和 b 为整数，n 从 0 开始递增）。通过公式可以灵活按周期匹配子元素。
课程知识要点
-
索引基准为 1：
nth-child(1)选中第一个子元素，与 CSS 的nth-child伪类规则一致。 -
odd/even 关键字：分别匹配奇数和偶数位置，比手动写
2n+1或2n更易读。 -
公式 an+b 的灵活运用：
2n表示所有偶数位，3n+1表示第 1、4、7……个，4n+4表示第 4、8、12……个。调整 a 和 b 可以覆盖各种周期性的位置需求。 -
只按位置匹配，不关心类型：
:nth-child()统计所有兄弟元素，前置选择器用于限定计算范围。两者配合才能精确命中目标。
示例：四种参数用法综合演示
下面这个例子将 :nth-child() 的四种参数形式集中在同一个页面中，通过不同按钮触发不同的筛选效果。页面上有一个包含 10 个列表项的 ul，四个按钮分别演示指定索引、奇数、偶数以及公式匹配。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>:nth-child 选择器示例 · 编程学习</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body {
font-family: sans-serif;
margin: 30px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px 16px;
margin: 4px 0;
border: 1px solid #ccc;
width: 60px;
text-align: center;
}
button {
margin: 8px 6px;
padding: 10px 18px;
font-size: 15px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>jQuery :nth-child() 选择器——四种参数用法</h2>
<p>以下列表共 10 项，索引从 1 到 10：</p>
<ul>
<li>第 1 项</li>
<li>第 2 项</li>
<li>第 3 项</li>
<li>第 4 项</li>
<li>第 5 项</li>
<li>第 6 项</li>
<li>第 7 项</li>
<li>第 8 项</li>
<li>第 9 项</li>
<li>第 10 项</li>
</ul>
<p>点击按钮查看对应的筛选效果：</p>
<button id="btn-nth">:nth-child(7)</button>
<button id="btn-odd">odd（奇数项）</button>
<button id="btn-even">even（偶数项）</button>
<button id="btn-formula">:nth-child(4n+4)</button>
<button id="btn-reset">清除高亮</button>
<script>
$(document).ready(function () {
// 先定义一个重置函数，方便复用
function resetHighlight() {
$("li").css("background-color", "white");
}
// 1. 选中索引为 7 的列表项
$("#btn-nth").click(function () {
resetHighlight();
$("li:nth-child(7)").css("background-color", "#fff3cd");
});
// 2. 选中所有奇数位置的列表项
$("#btn-odd").click(function () {
resetHighlight();
$("li:nth-child(odd)").css("background-color", "#ffe0b2");
});
// 3. 选中所有偶数位置的列表项
$("#btn-even").click(function () {
resetHighlight();
$("li:nth-child(even)").css("background-color", "#c8e6c9");
});
// 4. 使用公式 4n+4，选中索引为 4 和 8 的列表项
$("#btn-formula").click(function () {
resetHighlight();
$("li:nth-child(4n+4)").css("background-color", "#b3e5fc");
});
// 5. 清除所有高亮
$("#btn-reset").click(function () {
resetHighlight();
});
});
</script>
</body>
</html>
点击 :nth-child(7) 按钮，只有第 7 项的背景变色。点击 odd 按钮，第 1、3、5、7、9 项高亮为橙色。点击 even 按钮，第 2、4、6、8、10 项高亮为绿色。点击 :nth-child(4n+4) 按钮，第 4 和第 8 项高亮为蓝色。四种参数各司其职，覆盖了从单点精确匹配到周期批量匹配的常见需求。
个人经验与实用建议
在项目中，:nth-child() 在表格样式处理中应用很广。比如为表格的行设置斑马条纹，$("tr:nth-child(even)").addClass("stripe") 一行代码就能搞定。但需要注意，如果表格中有 thead 或 tbody 包裹，:nth-child() 是在直接父元素（也就是 tbody）的范围内计算位置，不会跨 tbody 统计。这意味着每个 tbody 内的行都会重新从 1 开始编号。
公式参数 an+b 的灵活性值得花一点时间熟悉。举个例子，如果你想每隔 3 项选中一次但从第 2 项开始，3n+2 就能匹配第 2、5、8……项。这类需求在卡片布局、多栏内容排列中偶尔会遇到，了解公式的推导方法可以当场写出来，不用额外引入 JavaScript 逻辑。
如果你在 :nth-child() 前面加上类型选择器（如 p:nth-child(3)），记住它是先计算位置再匹配类型。如果第 3 个子元素恰好不是 p，选择器不会回退到下一个 p，而是直接返回空。遇到不生效的情况时，先检查目标元素在父容器中的实际位置是否和预期一致，用 console.log($("父元素").children()) 查看完整的子元素列表是个快速定位问题的方法。
