:nth-child选不到元素是因为它按父元素所有子元素顺序计数，不区分标签类型；而:nth-of-type只统计同标签名的兄弟元素，适合结构不规整场景。
为什么 :nth-child 选不到你想要的元素？
因为 :nth-child 只看「父元素下所有子元素的顺序位置」，不区分标签类型。比如一个 <div> 前面有 <code><p></p> 和 <span></span>，那它可能是第 3 个子元素，但不是第 1 个 <div>。
<p>常见错误现象：<code>ul li:nth-child(2) 想选第二个 <li>，结果没生效——很可能是因为 <ul></ul> 里第一个子元素是注释、空格文本节点，或意外插入了其他标签（如 <div class="ad">）。
<ul>
<li>使用前先用浏览器开发者工具检查父容器的「真实子节点结构」，右键 →「Edit as HTML」可看清隐藏节点</li>
<li>若父元素中混有多种标签且目标元素不连续，优先考虑 <code>:nth-of-type
:nth-child(n) 的 n 从 1 开始计数，:nth-child(0) 无效什么时候必须用 :nth-of-type？
:nth-of-type 只统计「同种标签名」的兄弟元素，跳过其他类型。适合在结构不规整但语义明确的场景中精准定位，比如文章正文里所有 <p></p> 中的第 3 个，不管中间夹了多少 <img alt="css:nth-child与:nth-of-type伪类如何高效使用_快速选择指定位置元素" > 或 <blockquote></blockquote>。
典型使用场景：富文本 CMS 输出的 HTML、Markdown 渲染结果、用户可编辑区域。
立即学习“前端免费学习笔记（深入）”；
-
p:nth-of-type(3)选的是第 3 个<p></p>，哪怕它在 DOM 中是第 8 个子节点 - 注意：它只认标签名，不认 class 或 role；
div.foo:nth-of-type(2)中的.foo不参与类型判断，仅作附加筛选 - IE8 不支持
:nth-of-type，如需兼容，得用 JS 补充或改用 class 控制
:nth-child 和 :nth-of-type 的公式写法差异
两者都支持 an+b 形式（如 2n+1），但匹配逻辑不同导致结果常不一致。
例如父元素含：<h2></h2>
<p>A</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>
<div></div>
<p>B</p>
<p>C</p>
-
p:nth-child(3)→ 不匹配（第 3 个子元素是<div>） <li> <code>p:nth-child(4)→ 匹配<p>B</p>（它是第 4 个子元素） -
p:nth-of-type(2)→ 匹配<p>B</p>（它是第 2 个<p></p>） -
:nth-child(odd)和:nth-of-type(odd)在纯同类型列表中效果相同，但一旦混入其他标签，结果立刻分叉 - 优先用语义化 class 替代魔数定位，比如给关键项加
class="first-feature"或class="highlighted-item" - 若必须用伪类，配合
:is()或:where()提升可读性，例如：article :is(h2, h3):nth-of-type(1) - 避免在关键交互样式（如 hover、focus）中依赖
:nth-child定位，DOM 微小变动就可能导致样式错位
性能与维护建议：别让伪类变“谜语”
深层嵌套 + 复杂 an+b 表达式（如 :nth-child(3n+7)）会让 CSS 难以阅读和调试，尤其在团队协作中。
最易被忽略的一点：伪类选择器不触发重排，但过度嵌套或搭配 *:nth-child(n) 这类宽泛写法，可能拖慢 CSS 解析速度，尤其在长列表渲染时。
