:nth-child和:nth-of-type不冲突，而是计数逻辑不同：前者按父元素所有子节点（含文本、注释）的物理位置计数，后者仅按同标签兄弟元素顺序计数；误用源于混淆“按位置选”与“按类型序号选”。
为什么:nth-child和:nth-of-type会“冲突”
它们不真冲突，只是常被当成交替方案误用。比如你写了 p:nth-child(2) 没生效，又补一条 p:nth-of-type(2)，结果两个都生效或都不生效——问题不在“冲突”，而在你本不该同时依赖这两个伪类去选同一个目标。根本原因是：:nth-child(n) 数的是父元素下所有子节点的物理位置（含文本节点、注释、div、h2），而 :nth-of-type(n) 只数同标签兄弟（比如只数所有 p，跳过中间一切非 p）。写两条规则，等于用两套计数逻辑强行覆盖同一组元素，极易互相干扰。
什么时候该删掉其中一个，而不是加另一个
优先保留一个，删掉另一个，除非你明确需要分层控制（比如奇偶背景用 :nth-child，特定段落样式用 :nth-of-type）。以下情况建议直接删 :nth-child：
- 目标是「第 N 个某类标签」，比如「第三段正文」
p、「第二个table」——必须用:nth-of-type(N)，:nth-child在混排结构里大概率失效 - HTML 动态生成（React/Vue 渲染、JS 插入）——新增节点会改变所有
:nth-child的位置序号，但不影响:nth-of-type的类型内序号 - 父容器里有换行、缩进、注释（
<!-- -->）——这些都会被:nth-child当成子节点计数，但:nth-of-type完全无视
反过来，删 :nth-of-type 的场景极少，仅限：你要严格按视觉/布局顺序控制（比如网格第一列所有元素），且能确保父容器结构绝对干净（无注释、无空格文本节点、无其他标签插队）。
如何用开发者工具快速判断该留哪个
别猜，直接看 DOM 结构：
- 在 Elements 面板中右键父容器 →「Edit as HTML」，肉眼扫一遍子节点序列，数清目标元素前面有多少个节点（包括
<h2></h2>、<div>、<code><!-- -->、换行产生的#text） - 临时加一条测试样式：
*:nth-child(2) { outline: 2px solid red; }，看红框套在谁身上——如果套在<div> 上，说明你写的 <code>p:nth-child(2)根本没机会匹配 - 再试
p:nth-of-type(2) { outline: 2px solid blue; }，如果蓝框准确套住第二个p，就证明该用后者
注意：浏览器不会告诉你“这个 :nth-child 被注释挡住了”，它只会静默失败。你得自己把 DOM 节点全摊开来看。
真正难的不是语法，而是确认“第几个”的参照系
每次写之前，必须明确回答一个问题：“我数的‘第 N 个’，到底是按父容器所有孩子排队的第 N 个，还是按所有同标签兄弟排队的第 N 个？”前者对应 :nth-child，后者对应 :nth-of-type。很多人翻车，是因为对着设计稿说“这是第二个卡片”，但没意识到 DOM 里它前面还藏着一个 <header></header> 和三行空白。这种偏差没法靠调优选择器修复，只能靠手动验证结构。一旦父容器层级变深、插入 wrapper 或服务端注入注释，:nth-child 就会立刻失准——而 :nth-of-type 的稳定性，恰恰来自它对这些干扰项的彻底忽略。
