CSS的nth-child选择器是常用的伪类选择器，能够根据元素在父容器中的位置匹配对应的子元素，在列表样式、表格行列样式等场景中应用非常广泛。但在存在多层嵌套的DOM结构里，很多开发者会因为对选择器的匹配逻辑理解不到位，出现样式无法正确生效的问题。
nth-child选择器的基础匹配规则
nth-child选择器的语法是:nth-child(an+b)，其中a和b是整数，n是从0开始递增的自然数。它的匹配逻辑是：先找到当前元素的所有同级兄弟元素，然后按照文档顺序排列，筛选出位置符合an+b公式的元素。
需要注意的是，nth-child匹配的是同级元素中的位置，和元素的标签类型、类名没有直接关系，只会按照DOM树的顺序排列计算。
基础用法示例
比如我们有一个无序列表，想要给第2个和第4个列表项设置红色文字，代码如下：
<ul class="list"> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> <li>列表项5</li> </ul>
对应的CSS代码为：
/* 匹配位置为2、4的li元素 */
.list li:nth-child(2n) {
color: red;
}
嵌套场景下的定位逻辑
当DOM结构存在多层嵌套时，nth-child的匹配范围会被限制在当前的父元素下，不会跨层级计算。很多开发者容易混淆的点是，嵌套时选择器的层级关系决定了匹配的范围。
多层嵌套的匹配示例
假设我们有如下嵌套结构，想要给外层列表的第2个内层列表的第1个列表项设置背景色：
<ul class="outer-list">
<li>外层项1
<ul class="inner-list">
<li>内层项1-1</li>
<li>内层项1-2</li>
</ul>
</li>
<li>外层项2
<ul class="inner-list">
<li>内层项2-1</li>
<li>内层项2-2</li>
</ul>
</li>
<li>外层项3
<ul class="inner-list">
<li>内层项3-1</li>
<li>内层项3-2</li>
</ul>
</li>
</ul>
正确的CSS写法需要先定位到外层列表的第2个li，再找到其下的内层列表的第1个li：
/* 外层列表第2个li下的内层列表第1个li */
.outer-list > li:nth-child(2) .inner-list li:nth-child(1) {
background-color: #f0f0f0;
}
这里的>是子元素选择器，确保只匹配.outer-list的直接子元素li，避免匹配到更深层的li元素。如果去掉>，可能会匹配到外层列表下所有层级的第2个li，导致定位错误。
常见误区和避坑方法
- 误区1：认为nth-child会过滤元素类型。实际上nth-child只计算同级元素的位置，不管元素标签是什么。比如父元素下第一个子元素是div，第二个是p，那么p:nth-child(1)是不会匹配的，因为p不是第1个同级元素。
- 误区2：嵌套时忽略选择器的层级范围。如果直接写
.inner-list li:nth-child(1)，会匹配所有.inner-list下的第1个li，而不是指定外层项下的，需要结合父级选择器限定范围。 - 误区3：混淆nth-child和nth-of-type。nth-of-type是按照同类型元素的顺序排列，而nth-child是所有同级元素排列，嵌套场景下如果需要按标签类型匹配，要选择合适的选择器。
实用场景示例
比如我们需要实现一个表格，给偶数行的单元格设置浅灰色背景，同时表头的行不生效，结构如下：
<table class="data-table">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
</tr>
<tr>
<td>王五</td>
<td>25</td>
</tr>
</tbody>
</table>
正确的CSS写法为：
/* 只匹配tbody下的偶数行tr */
.data-table tbody tr:nth-child(2n) {
background-color: #f9f9f9;
}
这样就能精准定位到tbody下的第2、4、6等偶数行，不会影响到thead里的表头行，实现预期的样式效果。