:nth-child() 选择器的计算逻辑非常直接：它按照元素在父容器中的兄弟顺序进行编号，然后与括号中的公式进行比对。但很多样式失效的案例都源于一个基本误区——把 :nth-child() 当成了全局序号选择器，或者忽略了嵌套结构对不同父容器的隔离作用。实际上它计算的是“同一父节点之下第几个子元素”，而不是整个页面范围内的第几个同类元素。理解这一点之后，再复杂的嵌套结构也能精准定位。
为什么 :nth-child() 在嵌套元素中经常失灵
先看一个最常见的失败例子。假设页面上有多个列表，每个列表下面又有子列表，开发者想选中所有一级列表中第一个列表项，通常会写 .list li:nth-child(1)。这个选择器实际匹配的是“class 为 list 的后代 li 元素中，那些属于其父元素第一个子元素的 li”。要注意，这里并没有限定 li 的父元素必须是 .list，所以子列表中的第一个 li 也会被选中，甚至只要某个 li 恰好是它所在父容器中的第一个元素，都会被命中。最终结果就是同时出现多个高亮项，而不是预期的第一个一级菜单项。
这是因为 :nth-child() 天然是基于“父容器”作为计数作用域的。每个元素都有一个独立的父元素，选择器只能在同一层级的兄弟节点之间比较序号。嵌套的子层会被视为另一个完全独立的容器，无法跨越父容器继续延续序号。换句话说，父容器就是一道无形的墙，:nth-child() 的计数永远不会穿透这道墙。针对上面那个例子，应该写成 .list > li:nth-child(1)，这样才把范围限制在 .list 的直接子 li 中。
另一个容易忽略的情况是：:nth-child() 对同类和异类元素都计数。比如一个父容器下面依次排列着 h2、p、p、span，那么第二个 p 是第 3 个子元素，span 是第 4 个子元素。很多人想选第二个 p 时直接写 p:nth-child(2)，结果发现选不中，因为父容器第二个子元素是第一个 p，而不是第二个 p。这暴露了 :nth-child() 与 :nth-of-type() 最关键的区别：前者按所有节点序号整体计算，后者按同类标签独立计数。
正确理解 an+b 公式与嵌套层级的关系
:nth-child() 的括号中还可以使用 an+b 形式的公式，n 从 0 开始递增。典型写法有 :nth-child(odd)、:nth-child(even)、:nth-child(3n+1) 等。这个公式同样受父容器作用域限制，并且所有类型的元素都参与计数。嵌套结构会直接影响公式的实际匹配结果，因此写公式前应该先把目标层级在 DOM 树中展开，画出标准结构，再根据结构推导序号。
举个例子，有一个典型卡片结构，父容器内依次是标题、描述、图片、按钮。如果结构是 h2、p、img、button 各一个，那么想选中按钮就要写 :nth-child(4)；如果标题前面又多了一段 div，按钮的位置就变成第 5 个。这里要特别注意公式中 n 是从 0 开始，所以第 1 个子元素对应 n=0；第 4 个子元素可以用 n=3 表示，也可以写成 4n+4 这类等价形式。实际开发中，建议先用浏览器开发者工具在 Elements 面板中展开 DOM，直接对照序号写出公式。
对于嵌套层级很深的场景，直接写长串后代选择器并不是好方案。例如 .wrapper .content .item .title:nth-child(2) 这样冗长的路径会让选择器特异性过高，后续维护很困难。更推荐的做法是把 :nth-child() 作用在直接相邻的父容器上，并用子选择器进行隔离。例如结构是 .card > .header > .title，要选中 .header 下的第二个 title，写成 .card > .header > .title:nth-child(2) 就比 .card .title:nth-child(2) 更稳，因为它不会误伤其他嵌套层。
<div class="box">
<h2>标题</h2>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
</div>
上面这个结构想选中第二段文字，应该写 .box > p:nth-child(3)，因为 h2 占用了第 1 个位置。如果写 .box > p:nth-child(2)，选中的将是第一段文字。这种数字偏移造成的问题在嵌套结构中很容易被忽略。为了减少序号推算负担，可以在每一个嵌套层级都画清楚子元素的完整顺序，再写出对应公式。
:nth-child() 与 :nth-of-type() 在嵌套场景中的分工
当同一父容器下混合了多种标签时，nth-child 和 nth-of-type 的选择逻辑差异会非常明显。假设容器内有 div、span、p、span，那么 span:nth-child(2) 选不中任何元素，因为第 2 个子元素是第一个 span，但它的标签类型使得它作为 span 的序号是第 1 个，与 nth-child(2) 不匹配。反过来 span:nth-of-type(2) 会命中第 4 个子元素，因为 nth-of-type 只统计 span 之间的顺序。
在嵌套列表或表格这类重复性很强的结构中，两种选择器都能达到目标，但语义完全不同。对于“第几个子元素”的语义，用 nth-child 更准确；对于“第几个同类元素”的语义，应该用 nth-of-type。例如一组连续的 p 标签之间偶尔插入 div，同时想选中第二段文字，nth-of-type 更稳定，因为插入的 div 不会影响 p 的计数；而 nth-child 只要多一个节点位置就会错位。可以说 nth-of-type 是嵌套混合结构中的救星，但它并不能替代 nth-child 的位置计算能力。
值得注意的是，如果 HTML 标签本身就是相同类型，二者结果一致。很多开发者会因为习惯使用 nth-child 而忽略 nth-of-type，直到遭遇混合标签结构才意识到踩坑。正确做法是先观察父容器内部的标签分布，如果目标元素和干扰元素标签相同，两者都可用；如果标签不同，优先考虑 nth-of-type 来屏蔽无关标签的干扰。下面对比展示两种选择器在同一结构中取值不同：
/* 错误：以为选中第二个 span，实际被 div 干扰 */
.container span:nth-child(2) {
background: red;
}
/* 正确：按 span 标签独立计数 */
.container span:nth-of-type(2) {
background: red;
}
/* 正确：限定直接子容器，避免后代干扰 */
.container > span:nth-child(2) {
color: blue;
}
多层嵌套中准确锁定特定子项的最佳实践
面对多层嵌套结构，第一步永远是在 HTML 中明确目标元素的父容器是谁。不要试图用一个长后代选择器跨越多个层级去捕捉目标，因为只要中间任何一层结构发生变化，选择器就会失效。比较稳妥的思路是：从目标元素开始向上找到最近的、结构稳定的父容器，把 nth-child 写在这个父容器与目标元素之间。这样可以显著缩小匹配范围。
如果嵌套较深，可以为关键节点添加有语义的类名。例如商品列表中每个商品卡片内部又有图片、标题、价格、按钮，直接写 .item > .btn:nth-child(2) 很脆弱，因为前面一旦增加新标签就会错位。更稳定的做法是给按钮单独加一个 .btn-buy 类，然后直接写 .item .btn-buy，避免使用序号。这并不是说 nth-child 没有存在价值，而是在强调：结构可能频繁变化的场景中，结构性类名比位置更可靠。nth-child 更适合那些结构高度固定、天然重复排列的元素，比如表格行、列表项、轮播图分页点等。
<ul class="menu">
<li>一级菜单
<ul class="sub">
<li>子项A</li>
<li>子项B</li>
</ul>
</li>
<li>一级菜单2</li>
</ul>
比如上面这段嵌套菜单，想选中子项 B，用 .menu li:nth-child(2) 会选中两个元素：一个是“一级菜单2”，另一个是“子项B”，因为这两个 li 在各自父容器中都是第 2 个子元素。如果想要子项 B，只能通过限定中间层路径来定位，写成 .menu > li:nth-child(1) > .sub > li:nth-child(2)。这就是嵌套结构带来的选择复杂性，必须逐层确认。
在动态渲染页面时，nth-child 的选择结果还会受渲染顺序影响。比如前端框架根据数据数组渲染列表，数组为空时占位节点可能占据序号；条件渲染也会让某个子元素在部分场景下缺席，后续所有元素的位置都会改变。这种场景下，除非你把渲染逻辑严格控制为永远不产生额外节点，否则 nth-child 很容易意外错位。建议在动态组件中优先使用数据判断配合类名绑定，而不是依赖 CSS 序号。在静态展示页面中，nth-child 则非常适合实现例如斑马纹表格、按位置自动编号等视觉效果。
综合来看，正确使用 :nth-child() 的核心原则可以总结为三点：第一，作用域始终限定在父容器内部的兄弟节点；第二，混合标签结构中要分清 nth-child 和 nth-of-type 的计数差异；第三，多层嵌套必须通过子选择器逐层收敛范围，不要跨越中间容器。实际书写时先画出目标元素的 DOM 结构，数清楚它在父容器中的第几位，再决定选择器写法。只要养成这个习惯，嵌套元素的选择会变得非常可靠。