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 顺序，不管渲染后是否在视口底部。
- ✅ 正确做法：给汇总行加 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; } - ✅ 现代浏览器对这类伪类优化很好，百行内基本无感知
- ⚠️ 若表格动态渲染上千行（比如虚拟滚动前的全量 DOM），每个
tr:last-child查询都会触发重排重绘，拖慢首次渲染 - ? 极端场景建议：用 JS 动态加 class（如
document.querySelector('tbody').lastElementChild.classList.add('last-row')），避免 CSS 引擎反复计算
兼容性与性能：IE11 要小心，大量行慎用
:last-child 和 :last-of-type 在 IE9+ 都支持，但 IE11 对嵌套过深的伪类有轻微解析延迟；更关键的是性能问题：
tbody 的最后一行，而不是用户看到的视觉末行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
