:nth-child(n)按父元素所有子元素总顺序计数，:nth-of-type(n)仅对同标签兄弟元素单独计数；常见失效原因包括混入其他节点、选错伪类、优先级冲突或动态HTML导致序号偏移。
CSS 中 :nth-child(n) 和 :nth-of-type(n) 看似相似，但选择逻辑完全不同——样式“不生效”，往往是因为你选错了 selector。
关键区别：数谁？
:nth-child(n) 是按父元素下所有子元素的**总顺序**来数的，不管标签名是否相同。
:nth-of-type(n) 是只对**同一种标签名**的兄弟元素单独编号、再取第 n 个。
例如父容器内结构是：
-
.wrap p:nth-child(2)→ 不匹配任何p。因为第 2 个子元素是第一段
.wrap p:nth-child(3)，就失效了——因为第 3 个子元素是第二段
立即学习“前端免费学习笔记（深入）”；
.wrap p:nth-child(4)就完全不匹配，因为第 4 个子元素是。 -
.wrap p:nth-of-type(2)→ 匹配“第二段”，因为它是第 2 个p元素（忽略h2和span）。
为什么你的 nth 样式没反应？常见原因
- 父元素里混有其他类型元素（如注释、文本节点、不同标签），干扰了
:nth-child的计数； - 写了
:nth-child却想选“第 n 个某标签”，实际该用:nth-of-type； - 伪类写在了错误的元素上，比如给
p写:nth-child(1)，但它的父元素第一个子元素其实是h1； - CSS 优先级被更高权重的规则覆盖（检查开发者工具中该样式是否被划掉）；
- HTML 结构动态生成（如 Vue/React 渲染后插入了额外 wrapper 或 comment 节点），导致序号偏移。
快速验证方法
- 打开浏览器开发者工具，选中目标元素，看“Computed”面板里是否计算出了你的样式；
- 临时给父元素所有子元素加边框：
.wrap > *，直观看出每个子元素的位置和类型； - 把
:nth-child换成:nth-of-type（或反过来）测试，看是否“突然生效”——这基本能定位问题根源； - 用
:nth-child(1)或:nth-last-child(1)测试首尾，确认计数起点是否符合预期。
实用建议：什么情况该用哪个？
- 要选“父容器中从头数第 n 个位置的元素”，且你清楚该位置固定是某个标签 → 用
:nth-child； - 要选“第 n 个同类型兄弟元素”，不关心中间有没有插队的其它标签 → 用
:nth-of-type； - 需要精准控制网格、列表项、表单控件等结构化排列 →
:nth-child更可靠（前提是结构干净）； - 处理内容流中穿插标题、图片、段落的富文本区域 →
:nth-of-type更鲁棒。
