tbody tr:last-child 才能选中表格最后一行，因tr父元素通常是tbody而非table；若结构无tbody或含多个tbody需用兜底方案或JS动态标记。

tr:last-child 选不到最后一行？先看表格结构

直接写 tr:last-child 却没生效，大概率是 HTML 结构问题。浏览器会把 <thead>、<code><tbody>、<code><tfoot> 当作独立容器，而 <code>tr 的父元素通常是 tbody，不是 table。

所以真正起作用的是：tbody tr:last-child，而不是 table tr:last-child（除非你没写 tbody，且所有 tr 都直接挂在 table 下）。

• ✅ 推荐写法：tbody tr:last-child { background: #e6f7ff; }
• ⚠️ 容易踩坑：如果表格动态生成时漏了 tbody，或混用了 thead + 多个 tbody，last-child 就会选到某个 tbody 的末行，而非整表最后一行
• ? 补救方案：若必须支持无 tbody 的旧结构，可加兜底：table > tr:last-child, tbody tr:last-child

tr:last-of-type 比 last-child 更稳？不一定

tr:last-of-type 确实不依赖“是否为最后一个子节点”，只认“同类型中最后一个”，听起来更可靠。但它也有隐性限制：

• ✅ 在标准结构中（tbody 内只有 tr），tbody tr:last-of-type 和 tbody tr:last-child 效果一致
• ❌ 如果 tbody 里插了注释、空格文本节点（比如模板引擎渲染残留），last-child 会失效，但 last-of-type 仍能命中 —— 这是它唯一明显优势
• ⚠️ 注意：如果用了 colgroup 或自定义 Web Component 标签混在 tbody 中，last-of-type 可能误判（例如把 my-row 当成 tr 同类）

汇总行固定在底部？别用 :last-child

当最后一行是合计/总计，且需要始终贴底（比如表格高度固定、内容溢出滚动），:last-child 无法保证视觉位置 —— 它只管 DOM 顺序，不管渲染后是否在视口底部。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

立即学习“前端免费学习笔记（深入）”；

• ✅ 正确做法：给汇总行加 class，如 <tr class="summary-row">，再用 CSS 固定定位或 flex 布局控制位置 <li>⚠️ 避免陷阱：不要指望 <code>tr:last-child + position: sticky 实现“粘底”，sticky 是相对父容器顶部吸附，不是底部
• ? 替代思路：用 tfoot 包裹汇总行，并设置 tfoot { position: sticky; bottom: 0; }，但需配合 tbody { max-height: 300px; overflow-y: auto; }

兼容性与性能：IE11 要小心，大量行慎用

:last-child 和 :last-of-type 在 IE9+ 都支持，但 IE11 对嵌套过深的伪类有轻微解析延迟；更关键的是性能问题：

• ✅ 现代浏览器对这类伪类优化很好，百行内基本无感知
• ⚠️ 若表格动态渲染上千行（比如虚拟滚动前的全量 DOM），每个 tr:last-child 查询都会触发重排重绘，拖慢首次渲染
• ? 极端场景建议：用 JS 动态加 class（如 document.querySelector('tbody').lastElementChild.classList.add('last-row')），避免 CSS 引擎反复计算
实际应用中最容易被忽略的，是表格语义结构和 DOM 层级之间的错位 —— 你以为的“最后一行”，可能只是某个 tbody 的最后一行，而不是用户看到的视觉末行。