cssnth-child与nth-of-type使用对比_匹配相同类型元素

常见错误是以为它只挑同类型元素——其实完全不会过滤标签名。

• 如果父元素下第二个子节点是
  ，那 p:nth-child(2) 能命中；但若第二个是 ，同一个选择器就失效
• :nth-child(2n) 会选中所有偶数位置的子元素，不管它们是不是

• 性能上无明显差异，但可读性容易误导：写 p:nth-child(3) 时，你得先确认第三个子元素恰好是

nth-of-type 只匹配同种标签的第 N 个，忽略其他类型节点

它内部做了“按标签分组”的动作。比如父元素有 、

、、
，那么 p:nth-of-type(2) 会命中第四个子节点（第二个
），跳过中间的 。

这是真正按“同类元素序号”筛选的方式。

• 适合列表中穿插标题、说明文字等场景，例如文章段落
  中每隔两段加样式，不管中间有没有
  或
• div:nth-of-type(2) 和 :nth-child(2) 在纯 结构里结果一致，但一旦混入其他标签，行为立刻分化
• 注意伪类优先级：p:nth-of-type(1) 比 :first-of-type 更灵活，支持表达式如 (3n+1)

实际调试时怎么快速判断该用哪个？

打开浏览器开发者工具，把鼠标悬停在目标元素上，看它在父容器中的「Children」列表里的序号（从 1 开始），再数一数同标签兄弟有几个——两个数字一致，:nth-child 和 :nth-of-type 效果才相同。

• 想按视觉顺序（HTML 流式布局位置）控制样式 → 用 :nth-child
• 想按语义分组（比如所有按钮、所有段落）独立编号 → 用 :nth-of-type
• 遇到没生效，先检查是否误把 当成 ——span:nth-of-type(1) 不会匹配 ，哪怕它是第一个内联元素

/* 示例结构 */
标题
第一段
无关容器
第二段
第三段