在编写前端页面时，我们常常需要对一组兄弟元素里的某一个或某几个特定位置的元素单独设置样式。CSS提供的:nth-child伪类选择器就是专门用来完成这种基于位置筛选任务的工具。它允许开发者不借助额外的class或JavaScript，仅通过一条声明就精准命中父容器下排在第几位的子元素，从而大幅提升样式表的可维护性。
理解:nth-child的匹配底层逻辑
:nth-child伪类选择器在计算目标元素时，始终以“父元素的所有子元素”为统计范围，并按照文档树中的自然先后顺序从1开始编号。这意味着哪怕中间穿插了不同标签名的节点，计数也不会中断或重置。很多初学者误以为:nth-child(2)只会选中同标签的第二个，实际上只要该元素在父级全体孩子里排第二，无论它是<div>还是<span>都会被选中。
为了验证这一点，我们可以考虑一个包含标题与列表混合的结构。如果父元素第一个孩子是<h3>，第二个是<p>，那么p:nth-child(2)能够匹配该段落，而p:nth-child(1)则完全失效，因为排第一的是标题而非段落。这种机制要求我们在写选择器时必须先看清DOM的真实顺序，而不是仅看视觉上的同类分组。
与:nth-child容易混淆的还有:nth-of-type，后者的计数范围缩小到同标签名的兄弟元素。当布局严格同质（如纯<li>列表）时两者结果一致；一旦结构混杂，差异就会显现。明确这组区别，是避免样式“串位”的第一步。
常用表达式与代码实战
:nth-child支持多种表达式写法，最基础的是关键词odd与even，分别选中奇数位与偶数位子元素，常用于表格隔行换色。数字则直接指定绝对位置，如:nth-child(3)只命中第三位。更强大的是an+b语法，其中a为步长，b为偏移，例如:nth-child(3n+1)会选中第1、4、7……位。
下面是一段完整的HTML与CSS示例，演示如何给无序列表中的偶数项添加底色，并单独强调第五项：
<ul class="demo"> <li>项目一</li> <li>项目二</li> <li>项目三</li> <li>项目四</li> <li>项目五</li> <li>项目六</li> </ul>
.demo li:nth-child(even) {
background-color: #f2f2f2;
}
.demo li:nth-child(5) {
color: #e91e63;
font-weight: bold;
}
上述代码中，even让第二、四、六项获得浅灰背景，而:nth-child(5)把第五项文字变为粉色加粗。如果希望选中前三个子元素，可使用:nth-child(-n+3)，这里的负号表示反向截取，从开头算起到第三为止。灵活组合这些表达式，就能覆盖绝大多数基于位置的样式需求。
在响应式场景中，还可以配合媒体查询变更:nth-child的规则。例如在窄屏下取消隔行色以节省视觉干扰，宽屏恢复。这种纯CSS控制方式比用JS监听 resize 再增删class要轻量得多，也更符合样式与行为分离的原则。
典型误区与兼容性处理
最常见的误区是忽略父级下的空白文本节点或注释节点。在HTML规范里，标签之间的换行与空格通常不构成元素节点，因此不会影响:nth-child计数；但某些旧版解析环境或XML式结构可能将空白视为文本子节点，从而导致序号偏移。因此写结构时尽量保持父容器内只有预期的元素孩子，可减少诡异错位。
另一个坑是多层嵌套时误用。比如写ul li:nth-child(2)本意是选中每个ul里的第二个li，但如果某个li内部还有子ul，内层ul的li并不会被外层选择器影响，因为:nth-child只相对于其直接父元素计算。若确实需要跨层控制，应调整选择器层级或改用其他策略。
从兼容性看，:nth-child在IE9及以上、全部现代浏览器均受支持，可以放心用于生产。但在需要兼容IE8等古董环境时，只能退而求其次，通过服务器端或构建工具为特定位置元素手动添加class。总体而言，只要理清DOM顺序、选对表达式，:nth-child就是高效且语义清晰的子元素定位方案。