本篇文章给大家分享《CSS技巧：给表格最后一行添加样式方法》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

本教程将详细介绍如何利用CSS伪类（如:last-child或:last-of-type）为HTML表格的最后一行添加自定义样式。通过实例代码，您将学习如何精确选中表格的最后一行，并应用背景色、字体等样式，从而提升表格的可读性和视觉效果，尤其适用于突出显示总计行。

理解CSS伪类：tr:last-child

在网页开发中，表格是展示结构化数据的重要元素。当我们需要突出显示表格的特定行，例如总计行或最后一行时，CSS伪类提供了一种简洁高效的解决方案。其中，tr:last-child和tr:last-of-type是两种常用的选择器。

• tr:last-child：这个伪类选择器会选中其父元素的最后一个子元素，并且该子元素必须是类型。这意味着如果表格的最后一个子元素不是（例如，是一个
  ），则此选择器将不会匹配。
• tr:last-of-type：这个伪类选择器会选中其父元素中所有类型元素中的最后一个。与last-child不同，即使父元素的最后一个子元素不是，只要在此之前存在元素，它也会成功选中最后一个。

在大多数标准的HTML表格结构中，如果总计行是表格或其元素的最后一个子元素，那么tr:last-child和tr:last-of-type通常会产生相同的效果。了解它们之间的细微差别有助于在更复杂的场景中做出正确的选择。

实践：为表格最后一行添加样式

以下将通过一个具体的例子，展示如何使用CSS为动态生成的表格的最后一行添加样式。

HTML结构示例

假设我们有一个通过JavaScript动态生成内容的表格，其基本结构如下。这里，我们假定表格包含一个表头和多个数据行，最后一行是总计行。

    
    
    
    



    
动态表格示例
    
    生成表格
    

        
    

    

CSS样式代码

现在，我们将使用CSS来选中并美化表格的最后一行。

/* 基础表格样式 */
table {
  border-collapse: collapse; /* 合并边框 */
  width: 80%; /* 表格宽度 */
  margin: 20px auto; /* 居中显示 */
  font-family: Arial, sans-serif;
  box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 添加阴影效果 */
}

table th,
table td {
  border: 1px solid #ddd; /* 单元格边框 */
  padding: 12px; /* 内边距 */
  text-align: center; /* 文本居中 */
}

table th {
  background-color: #f2f2f2; /* 表头背景色 */
  color: #333;
  font-weight: bold;
  text-transform: uppercase; /* 文本大写 */
}

/* 关键样式：选中表格 tbody 中的最后一行的样式 */
/* 注意：如果表格没有显式使用  和 ，
   浏览器会自动创建 。此处假定总计行是  的最后一个子元素。
*/
#dynamicTable tbody tr:last-child {
  background-color: darkblue; /* 深蓝色背景 */
  color: white; /* 白色字体 */
  font-weight: bold; /* 加粗 */
  border-top: 2px solid #333; /* 顶部加粗边框以突出 */
  font-size: 1.1em; /* 字体略大 */
}

/* 也可以针对最后一行的单元格进行更精细的控制 */
#dynamicTable tbody tr:last-child td {
    padding: 15px; /* 增加内边距 */
    vertical-align: middle; /* 垂直居中 */
}

/* 鼠标悬停效果 */
table tbody tr:not(:last-child):hover {
    background-color: #f5f5f5;
}

将上述CSS代码添加到HTML文件的