: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 标签，且是父元素的**第二个子节点**。中间夹个 <div>、换行产生的文本节点、甚至注释 <code><!-- -->，都会让序号偏移。
- HTML 是
<div> <h4>标题</h4> <p>一</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11112" title="CSS工具箱(专业版)"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11112" title="CSS工具箱(专业版)">CSS工具箱(专业版)</a> <p>全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p> </div> <a href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p>二</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </div>→p:nth-child(2)匹配第一个p（它是第 2 个子节点） - HTML 是
<div> <p>一</p> <span>干扰</span><p>二</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </div>→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”关掉，再逐层点开看真实子节点构成——这才是判断该用哪个的唯一可靠依据。
