:nth-child匹配父元素下第N个子元素（不区分标签类型），:nth-of-type只匹配同标签的第N个元素；前者按位置，后者按类型分组编号。
nth-child 匹配的是父元素下的第 N 个子元素，不关心类型
只要位置对得上，哪怕前面混着 <div>、<code><p></p>、<span></span>，:nth-child(2) 就选中父元素里排第二的那个节点。
常见错误是以为它只挑同类型元素——其实完全不会过滤标签名。
- 如果父元素下第二个子节点是
<p></p>，那p:nth-child(2)能命中；但若第二个是<div>，同一个选择器就失效<li> <code>:nth-child(2n)会选中所有偶数位置的子元素，不管它们是不是<p></p> - 性能上无明显差异，但可读性容易误导：写
p:nth-child(3)时，你得先确认第三个子元素恰好是<p></p> -
div:nth-of-type(2)和:nth-child(2)在纯<div> 结构里结果一致，但一旦混入其他标签，行为立刻分化<li>注意伪类优先级：<code>p:nth-of-type(1)比:first-of-type更灵活，支持表达式如(3n+1) - 想按视觉顺序（HTML 流式布局位置）控制样式 → 用
:nth-child - 想按语义分组（比如所有按钮、所有段落）独立编号 → 用
:nth-of-type - 遇到没生效，先检查是否误把
<em></em>当成<span></span>——span:nth-of-type(1)不会匹配<em></em>，哪怕它是第一个内联元素
nth-of-type 只匹配同种标签的第 N 个，忽略其他类型节点
它内部做了“按标签分组”的动作。比如父元素有 <div>、<code><p></p>、<div>、<code><p></p>，那么 p:nth-of-type(2) 会命中第四个子节点（第二个 <p></p>），跳过中间的 <div>。<p>这是真正按“同类元素序号”筛选的方式。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11815" title="CDP浏览器大师"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="CDP浏览器大师" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11815" title="CDP浏览器大师">CDP浏览器大师</a>
<p>CDP浏览器大师：通过Chrome DevTools Protocol驱动已登录浏览器实现自动化任务，解决反爬封号、选择器失效、SPA路由难导航、固定sleep不准四大痛点。核心能力包括UA伪装、WebGL/Canvas指纹混淆、智能等待、动态选择器以及可视化调试。</p>
</div>
<a href="/xiazai/skill11815" title="CDP浏览器大师" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<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>
<ul>
<li>适合列表中穿插标题、说明文字等场景，例如文章段落 <code><p></p> 中每隔两段加样式，不管中间有没有 <h3></h3> 或 <img alt="cssnth-child与nth-of-type使用对比_匹配相同类型元素" >
实际调试时怎么快速判断该用哪个？
打开浏览器开发者工具，把鼠标悬停在目标元素上，看它在父容器中的「Children」列表里的序号（从 1 开始），再数一数同标签兄弟有几个——两个数字一致，:nth-child 和 :nth-of-type 效果才相同。
/* 示例结构 */ <article><h2>标题</h2><p>第一段</p><div>无关容器</div><p>第二段</p><p>第三段</p></article>
上面结构中：p:nth-child(2) → 匹配“第一段”（它是第 2 个子元素）p:nth-of-type(2) → 匹配“第二段”（它是第 2 个 <p></p>）p:nth-child(4) → 匹配“第二段”（它是第 4 个子元素）p:nth-of-type(3) → 匹配“第三段”（它是第 3 个 <p></p>）
类型匹配这层隐含逻辑，不看 DOM 树结构几乎没法猜对结果。
