本文解析为何 table > tbody:nth-child(1) 无法匹配表格中的 tbody，而 :nth-child(2) 却能成功，并阐明 :nth-child 与 :nth-of-type 的本质区别及推荐用法。

本文解析为何 `table > tbody:nth-child(1)` 无法匹配表格中的 tbody，而 `:nth-child(2)` 却能成功，并阐明 `:nth-child` 与 `:nth-of-type` 的本质区别及推荐用法。

在 HTML 中，

元素的子元素顺序严格遵循文档结构：即使未显式书写 标签，浏览器也会自动插入（但本例中已显式声明）。关键在于 —— :nth-child(n) 是基于父元素下所有子元素的位置序号进行匹配的，而非仅针对某类标签。

以示例 HTML 为例：

Team	Points
A	15
B	21

此时，

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

的子元素共两个：（第 1 个）、（第 2 个）。因此：

• table > tbody:nth-child(1) → ❌ 失败：

不是第 1 个子元素；

table > tbody:nth-child(2) → ✅ 成功：

恰为第 2 个子元素；

table > tbody → ✅ 成功：不依赖序号，直接通过标签名匹配；

table > tbody:nth-of-type(1) → ✅ 推荐：

是 下第一个（也是唯一）的 tbody 类型元素，不受其他兄弟元素干扰。

✅ 最佳实践建议：

• 若目标是「选取表格中首个 tbody」，优先使用 table > tbody:first-of-type 或简写 table > tbody（因其唯一性）；
• 避免依赖 :nth-child(n) 定位 tbody，因其序号易受

、、 等同级元素影响，鲁棒性差；

:nth-of-type 按元素类型计数，更符合语义意图，适用于 tbody、tr、th 等表格专有标签的选择场景。

总结：:nth-child 是“全局序号匹配”，:nth-of-type 是“同类序号匹配”。在表格 DOM 操作与 CSS 选择器编写中，理解这一差异可避免隐蔽的定位失败问题。

、

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！