:nth-child(n)按父元素所有子元素总序号匹配，:nth-of-type(n)按同标签类型中第几个匹配；前者易受换行、注释等干扰失效，后者更稳定可靠。

核心区别就一句话：:nth-child(n)数的是父元素下所有子元素的总序号，:nth-of-type(n)数的是同标签类型中第几个。 你写错一个，样式就可能完全不生效，而且很难 debug。

为什么 p:nth-child(2) 有时选不到第二个 p

因为 p:nth-child(2) 要同时满足两个硬条件：是 p 标签，且是父元素的**第二个子节点**。中间夹个

、换行产生的文本节点、甚至注释 ，都会让序号偏移。

• HTML 是

  标题

  一

  二

  

  CSS工具箱(专业版)

  全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

  下载
  → p:nth-child(2) 匹配第一个 p（它是第 2 个子节点）
• HTML 是

  一

  干扰

  二

  → p:nth-child(2) 不匹配任何元素（第 2 个子节点是 span）
• 而 p:nth-of-type(2) 在这两种情况下都稳稳命中第二个 p

什么时候必须用 nth-of-type

真实 DOM 几乎从不“干净”：图文混排、表单字段穿插 label 和 div、卡片里塞 h3 + p + button……这类场景下，:nth-of-type 才是你真正想表达的“第 N 个目标标签”。

• 新闻列表里给第 3 个 article 加边框 → 用 article:nth-of-type(3)
• 表单里让第 2 个 input 宽度变宽 → 用 input:nth-of-type(2)，不怕前面有 label 或 div
• 不要用 li:nth-child(odd) 做隔行变色？除非你确定 ul 里只有 li，否则换成 li:nth-of-type(odd) 更安全

不加标签前缀时的行为差异

像 .list :nth-child(2) 和 .list :nth-of-type(2) 这种写法，区别更隐蔽：

• .list :nth-child(2) → 找 .list 下所有子元素里的第 2 个，不管它是什么标签
• .list :nth-of-type(2) → 对每种标签分别计数，所以会同时命中第 2 个 p、第 2 个 li、第 2 个 span……容易意外触发多个样式
• 绝大多数时候，你应该显式写出标签名，比如 p:nth-of-type(2)，避免歧义

最常被忽略的一点：DOM 中看不见的节点（空格、换行、注释）对 :nth-child 是真实存在的，但对 :nth-of-type 完全透明。调试时打开浏览器开发者工具，切到“Elements”面板，把“Show user agent shadow DOM”关掉，再逐层点开看真实子节点构成——这才是判断该用哪个的唯一可靠依据。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！