本文将介绍如何使用 CSS 为 HTML 表格的最后一行添加样式。我们将探讨如何利用 :last-child 和 :last-of-type 伪类选择器，并提供实际代码示例。
使用 :last-child 伪类选择器
:last-child 伪类选择器用于选择父元素的最后一个子元素。在表格的上下文中，我们可以使用它来选择
元素中最后一个 元素，也就是表格的最后一行。以下是一个简单的示例，展示如何使用 :last-child 伪类选择器为表格的最后一行设置背景颜色：
table {
border-collapse: collapse; /* 合并单元格边框 */
}
table td {
padding: 5px; /* 设置单元格内边距 */
}
table tr:last-child {
background: salmon; /* 将最后一行背景颜色设置为鲑鱼色 */
}在这个例子中，我们首先设置了表格的 border-collapse 属性为 collapse，以便合并单元格的边框，使其看起来更整洁。然后，我们为所有的
元素设置了 5px 的内边距。最后，我们使用 table tr:last-child 选择器选择了表格的最后一行，并将其背景颜色设置为鲑鱼色。 立即学习“前端免费学习笔记（深入）”；
对应的 HTML 示例：
佳蓝在线销售系统(创业版) 佳蓝在线销售
1、对ASP内核代码进行DLL封装，从而大大提高了用户的访问速度和安全性；2、采用后台生成HTML网页的格式，使程序访问速度得到进一步的提升；3、用户可发展下级会员并在下级购买商品时获得差额利润；4、全新模板选择功能；5、后台增加磁盘绑定功能；6、后台增加库存查询功能；7、后台增加财务统计功能；8、后台面值类型批量设定；9、后台财务曲线报表显示；10、完善订单功能；11、对所有传输的字符串进行安全
下载
| col1 |
col2 |
| col1 |
col2 |
| col1 |
col2 |
这段 HTML 代码创建了一个包含三行的简单表格。应用上述 CSS 样式后，表格的最后一行将呈现鲑鱼色的背景。
使用 :last-of-type 伪类选择器
:last-of-type 伪类选择器用于选择父元素的最后一个指定类型的子元素。在大多数情况下，:last-child 和 :last-of-type 的效果是相同的。但如果表格中包含其他类型的子元素，例如
元素，那么 :last-of-type 可以更精确地选择到最后的
|
元素。以下是一个使用 :last-of-type 的示例：
table {
border-collapse: collapse;
}
table td {
padding: 5px;
}
table tr:last-of-type {
background: darkblue; /* 将最后一行背景颜色设置为深蓝色 */
color: white; /* 将最后一行文字颜色设置为白色 */
font-weight: bold; /* 将最后一行文字加粗 */
}在这个例子中，我们不仅设置了最后一行背景颜色为深蓝色，还将文字颜色设置为白色，并加粗了字体。 :last-of-type 确保只有最后一个
元素被选中，即使表格中存在其他类型的元素。注意事项
-
CSS 优先级： 确保你的 CSS 规则具有足够的优先级，以便覆盖可能存在的其他样式。
-
浏览器兼容性： :last-child 和 :last-of-type 伪类选择器在现代浏览器中都有很好的支持，但在一些旧版本的浏览器中可能存在兼容性问题。如果需要支持旧版本浏览器，可以考虑使用 JavaScript 来实现类似的功能。
-
动态表格： 如果表格的内容是动态生成的，并且行数会发生变化，那么使用 CSS 伪类选择器仍然可以正确地选择到最后一行。
总结
通过使用 :last-child 或 :last-of-type 伪类选择器，可以轻松地为 HTML 表格的最后一行添加样式。选择哪个选择器取决于你的具体需求和表格的结构。希望本文能够帮助你更好地控制表格的呈现效果，提升用户体验。
