2. nth-child 和 nth-of-type 区别

总结

• :nth-child(n)：选择父元素的第 [n]个子元素，不管该子元素是什么类型（标签名）。
• :nth-of-type(n)：选择父元素下第 [n] 个相同类型的子元素，即只考虑指定标签名的元素。

---

一、:nth-child(n)

定义：

匹配父元素的第 [n](file://d:\Code\Gitee\video-project\admin\package.json) 个子元素，不区分子元素类型。

示例：

<ul><li>第一个 li</li><p>这是一个 p</p><li>第二个 li</li><li>第三个 li</li>
</ul>

li:nth-child(1) {color: red;
}

• 此时 li:nth-child(1) 匹配的是第一个子元素 <li>，生效。
• 若写成 li:nth-child(2)，则不会选中任何元素，因为第二个子元素是 <p>。

---

二、:nth-of-type(n)

定义：

匹配父元素下的第 [n](file://d:\Code\Gitee\video-project\admin\package.json) 个同类型子元素，即只在相同标签名中排序。

示例：

<ul><li>第一个 li</li><p>这是一个 p</p><li>第二个 li</li><li>第三个 li</li>
</ul>

li:nth-of-type(2) {color: blue;
}

• 此时会选中第二个 <li> 元素，即使它不是父元素的第二个子元素。

---

三、对比说明

选择器	含义	是否考虑元素类型	示例说明
:nth-child(n)	父元素下的第 n 个子元素	❌ 不考虑	可能不是目标元素
:nth-of-type(n)	父元素下第 n 个同类型的子元素	✅ 考虑	更精确匹配目标元素

---

四、常见用法示例对比

HTML 结构如下：

<div class="parent"><p>段落 1</p><div>div 1</div><p>段落 2</p><div>div 2</div><p>段落 3</p>
</div>

1. p:nth-child(3)

• 第 3 个子元素是 <p>，匹配成功。
• 实际上是第 2 个 <p>。

2. p:nth-of-type(2)

• 找出所有 <p> 中的第 2 个，结果是“段落 2”。

---

五、总结对比表

对比项	:nth-child(n)	:nth-of-type(n)
是否考虑元素类型	否	是
匹配范围	所有子元素	同类元素中排序
适用场景	需要根据位置选择元素，不关心类型	需要按类型选择特定顺序的元素
精确性	较低	较高

---