nth-child 和 nth-of-type 的区别？

⚡ 速记答案（30 秒）

:nth-child(n) 按所有子节点的顺序选，第 n 个子元素不管类型。:nth-of-type(n) 按同类型标签的顺序选，如第 n 个 li。中间混有其他标签时，nth-child 序号会被打乱。

📖 详细讲解

标准面试回答（推荐记住）

nth-child 和 nth-of-type 都是结构伪类，但选择逻辑不同。nth-child(n) 是按所有子节点的顺序来选，选中第 n 个子元素，不管它是什么类型。nth-of-type(n) 是按同类型标签的顺序来选，只在同类型元素中计数。容易出错的情况是：如果父元素下混有不同类型的标签，nth-child 的序号会被打乱，而 nth-of-type 只看同类型元素的顺序。

✅ 面试要点

•nth-child 看所有子元素顺序
•nth-of-type 只看同类型顺序
•混合元素时注意区别

💻 代码示例

nth-child vs nth-of-type

<ul>
  <span>我是 span</span>
  <li>第 1 个 li</li>
  <li>第 2 个 li</li>
</ul>

<style>
/* 选中 span（第 1 个子元素）*/
li:nth-child(1) { } /* 不生效！第1个是span */

/* 选中第 1 个 li */
li:nth-of-type(1) { color: red; } /* ✅ 生效 */
</style>

🎨 效果预览