nth-child按父元素所有子节点顺序计数，nth-of-type仅按同类型标签计数；前者易受注释/空格干扰，后者跳过异类元素，纯同标签列表中效果相同，但结构变动时结果常不同。
nth-child 和 nth-of-type 不是“选列表中第几个”，而是“在父容器里按不同规则数孩子”——用错一个，样式就套到别的元素上。
为什么 nth-child(2) 没选中你想要的第二个 li？
因为 nth-child(n) 看的是父元素下**所有子节点的顺序位置**，包括注释、空格文本、<script></script>、<div>，甚至隐藏的 DOM 节点。<ul>
<li>常见错误现象：<code>ul li:nth-child(2) 失效，实际检查发现 ul 第一个子节点是 HTML 注释 <!-- banner -->，那真正的第一个 li 就是第 2 个子节点，第二个 li 反而是第 4 个子节点
nth-child(0) 无效，n 必须 ≥ 1；nth-child(-n+3) 这类写法能选前 3 个，但可读性差，建议改用 class 控制什么时候必须用 nth-of-type？
当你只关心「某类标签的第几个」，而不管中间插了多少其他东西时，nth-of-type 是唯一可靠选择。
- 典型场景：CMS 输出的富文本、Markdown 渲染结果、用户可编辑区域（比如
<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a> <p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>中混着<img alt="如何利用CSS伪类选择列表中的特定元素_使用nth-child或nth-of-type" >、<blockquote></blockquote>、<hr>） -
p:nth-of-type(3)会跳过所有非p元素，只数第 3 个p标签，哪怕它在 DOM 中是第 12 个子节点 -
div.foo:nth-of-type(2)的.foo不参与类型判断，只做附加筛选；真正计数的仍是所有div标签 - IE8 不支持
nth-of-type，若需兼容，得用 JS 动态加 class 或后端渲染 class
nth-child 和 nth-of-type 的公式行为一致但结果常不同
两者都支持 2n+1、odd、even、-n+2 等写法，但因计数逻辑不同，同一表达式匹配的元素往往不重合。
立即学习“前端免费学习笔记（深入）”；
- 结构示例：
<h2></h2><p>A</p><div></div><p>B</p><p>C</p> -
p:nth-child(3)→ 不匹配（第 3 个子元素是<div>） -
p:nth-child(4)→ 匹配<p>B</p>（它是第 4 个子元素） -
p:nth-of-type(2)→ 匹配<p>B</p>（它是第 2 个p） - 纯同类型列表（如只有
li）中两者效果相同，但只要插入一个span或注释，结果立刻分叉
真正难的不是写对语法，而是写之前想清楚：你要选的是“座位号第 2 的人”，还是“学号为 2 的学生”。DOM 结构稍一变动，nth-child 就失效；而过度依赖 nth-of-type 会让样式和语义脱钩——比如给第 5 个 div 加关键动效，但未来内容调整后它可能变成广告位。这类定位，始终优先用语义化 class。
