CSS 迷思破解：`:nth-child` vs `:nth-of-type`

🎯 CSS 迷思破解：`:nth-child` vs `:nth-of-type`

在写 CSS 时，我们经常需要选中"第几个"元素。

比如："选中列表的第 3 项"或者"选中第 2 个段落"。

这时候，:nth-child 和 :nth-of-type 就登场了。

很多初学者认为它们是一样的，直到遇到混合标签的 HTML 结构时，才发现样式"失灵"了。

📂 目录

[🤔 一句话区分核心差异](#🤔 一句话区分核心差异)
[🧐 深度解析：:nth-child](#🧐 深度解析：:nth-child)
[🧐 深度解析：:nth-of-type](#🧐 深度解析：:nth-of-type)
[⚔️ 终极对决：代码实战对比](#⚔️ 终极对决：代码实战对比)
[💡 常见误区与最佳实践](#💡 常见误区与最佳实践)
[💡 总结](#💡 总结)

1. 🤔 一句话区分核心差异

:nth-child(n) ：看的是所有兄弟元素中的排位。（不管你是谁，只要你是第 n 个孩子，我就选你，然后再判断你的类型是否匹配。）

:nth-of-type(n) ：看的是同类型兄弟元素中的排位。（我只数和你一样的标签，你是第 n 个这种标签，我就选你。）

通俗比喻：

假设一个班级里有男生和女生混坐。

:nth-child(2) ：老师说："请第 2 个坐下的人站起来。"（不管他是男是女，只要是第 2 个坐下的，就站起来。如果第 2 个是女生，而你要求的是男生，那就没人站起来。）
:nth-of-type(2) ：老师说："请第 2 个男生站起来。"（忽略女生，只数男生，第 2 个男生站起来。）

2. 🧐 深度解析：`:nth-child`

语法：element:nth-child(n)

执行逻辑（两步走）：

找位置：在父元素的所有子元素中，找到第 [n](file://d:\Code\Gitee\video-project\admin\package.json) 个子元素。
验身份 ：检查这个第 n 个子元素是否是指定的 element 类型 。
- 如果是 ✅ -> 选中。
- 如果不是 ❌ -> 不选中（即使它是第 n 个，但类型不对，也无效）。

示例：

html 复制代码

<div>
  <p>Paragraph 1</p>
  <span>Span 1</span>
  <p>Paragraph 2</p>
</div>

css 复制代码

/* 选中第 2 个子元素，且该元素必须是 p */
p:nth-child(2) {
  color: red;
}

结果：没有任何元素变红 。
原因：第 2 个子元素是 <span>，虽然它是第 2 个孩子，但它不是 <p>，所以匹配失败。

3. 🧐 深度解析：`:nth-of-type`

语法：element:nth-of-type(n)

执行逻辑（一步走）：

过滤类型 ：先在父元素的所有子元素中，筛选出所有类型为 element 的元素。
数排位 ：在这些筛选出的元素中，找到第 n 个。

示例：

html 复制代码

<div>
  <p>Paragraph 1</p>
  <span>Span 1</span>
  <p>Paragraph 2</p>
</div>

css 复制代码

/* 选中第 2 个 p 元素 */
p:nth-of-type(2) {
  color: blue;
}

结果："Paragraph 2" 变蓝 。
原因：浏览器忽略 <span>，只数 <p>。第一个 <p> 是 "Paragraph 1"，第二个 <p> 是 "Paragraph 2"。所以选中了它。

4. ⚔️ 终极对决：代码实战对比

让我们通过一个更复杂的例子来彻底看清它们的区别。

📄 HTML 结构

html 复制代码

<ul class="container">
  <li>Item 1 (LI)</li>
  <div>Div 1 (DIV)</div>
  <!-- 干扰项 -->
  <li>Item 2 (LI)</li>
  <li>Item 3 (LI)</li>
  <p>P 1 (P)</p>
  <!-- 干扰项 -->
  <li>Item 4 (LI)</li>
</ul>

🎨 CSS 测试

测试 A：`:nth-child`

css 复制代码

li:nth-child(3) {
  background-color: yellow;
}

分析过程：

找到父元素 .container 的第 3 个子元素 。
- 第 1 个：<li>Item 1</li>
- 第 2 个：<div>Div 1</div>
- 第 3 个：<li>Item 2</li>
检查第 3 个子元素是否是 <li>？
- 是的，它是 <li>。
结果：Item 2 背景变黄。✅

测试 B：`:nth-of-type`

css 复制代码

li:nth-of-type(3) {
  background-color: lightblue;
}

分析过程：

在父元素 .container 中，找出所有的 <li> 元素 ，忽略其他标签。
- 第 1 个 <li>：Item 1
- （跳过 <div>）
- 第 2 个 <li>：Item 2
- 第 3 个 <li>：Item 3
- （跳过 <p>）
- 第 4 个 <li>：Item 4
选中第 3 个 <li>。
结果：Item 3 背景变蓝。✅

📊 对比总结表

特性	`:nth-child(n)`	`:nth-of-type(n)`
计数范围	所有兄弟元素	同类型兄弟元素
受干扰影响	是（其他标签会占用排位）	否（忽略其他标签）
匹配条件	位置匹配且类型匹配	仅类型内的位置匹配
适用场景	结构纯净、无杂项标签的列表	结构复杂、包含混合标签的容器

5. 💡 常见误区与最佳实践

❌ 误区 1：认为 `:nth-child(1)` 等同于 `:first-child`

事实：p:first-child 等价于 p:nth-child(1)。
但是，p:nth-of-type(1) 不等价 于 p:first-of-type 吗？
- 其实 p:first-of-type 等价于 p:nth-of-type(1)。
- 关键在于：first-child 要求它是第一个孩子且是 p；first-of-type 只要求它是第一个 p。

❌ 误区 2：在纯列表中使用 `:nth-of-type`

如果你的 HTML 结构非常干净，比如：

html 复制代码

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

此时 li:nth-child(2) 和 li:nth-of-type(2) 选中的都是同一个元素。
建议：在结构简单时，优先使用 :nth-child，因为它的兼容性略好（虽然现代浏览器都支持），且语义上更强调"位置"。

✅ 最佳实践：何时用哪个？

使用 :nth-child：
- 当你的父容器里只有同一类标签 时（如纯粹的 <ul><li> 或 <table><tr>）。
- 当你确实想根据"绝对位置"来选择元素时。
使用 :nth-of-type：
- 当父容器里混杂了不同标签 （如 <h2>, <p>, <img> 混排）。
- 当你只想针对某种特定标签进行排序选择，而不关心其他标签的存在时。
- 典型场景：文章正文中，选中"第 2 个段落"给特殊样式，不管中间插入了多少张图片。

💡 总结

🚀 博主寄语 ：

选择器的本质是模式匹配 。
:nth-child 是**"位置优先"，先占坑，再查户口。
:nth-of-type 是"类型优先"**，先查户口，再排队。

记住口诀 ：

Child 数全孩，类型不对拜拜。

Type 数同类，杂项标签无视。

结构纯净用 Child，

混合布局 Type 强。

希望这篇文档能帮你彻底厘清这两个选择器的区别！如果有疑问，欢迎在评论区留言。👇

喜欢这篇文章吗？记得点赞、收藏、转发哦！ ❤️

CSS 迷思破解：`:nth-child` vs `:nth-of-type`