理解 CSS 伪类选择器
在网页开发中，我们经常需要对特定位置的元素进行样式定制，例如表格的奇数行、偶数行，或者本文重点讨论的最后一行。css 提供了强大的伪类选择器来满足这些需求。对于表格的最后一行，最常用的两个伪类选择器是 :last-child 和 :last-of-type。
- :last-child: 这个伪类选择器用于匹配其父元素的最后一个子元素。在表格的上下文中，如果 <tbody> 或 <table> 元素中最后一个子元素是一个 <tr> 标签，那么 tr:last-child 就会选中它。
- :last-of-type: 这个伪类选择器用于匹配其父元素中特定类型的最后一个子元素。例如，tr:last-of-type 会选择其父元素（通常是 <tbody> 或 <table>）中最后一个 <tr> 类型的子元素。
在大多数标准表格结构中，<tbody> 内通常只包含 <tr> 元素，因此 tr:last-child 和 tr:last-of-type 对 <tr> 元素而言，效果通常是相同的。它们都能够准确地定位到表格的最后一行。
实战：为表格末行添加样式
假设我们有一个 HTML 表格，其中包含多行数据，并且最后一行通常用于显示汇总信息。我们希望将这最后一行的背景色设置为深蓝色（例如，darkblue），以使其在视觉上与数据行区分开来。
首先，我们来看一个典型的 HTML 表格结构：
<table id="myTable" class="data-table">
<thead>
<tr>
<th>N</th>
<th>N²</th>
<th>N!</th>
<th>Suma</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>2</td>
<td>8</td>
</tr>
<tr>
<td>3</td>
<td>9</td>
<td>6</td>
<td>18</td>
</tr>
<!-- 更多数据行 -->
<tr class="summary-row">
<td>6</td>
<td>14</td>
<td>9</td>
<td>∑</td>
</tr>
</tbody>
</table>为了给这个表格的最后一行（即类名为 summary-row 的行，但在实际应用中我们可能不希望依赖额外的类名）添加样式，我们可以使用如下 CSS 代码：
立即学习“前端免费学习笔记（深入）”；
/* 为表格设置基本样式 */
table {
width: 100%;
border-collapse: collapse; /* 合并单元格边框 */
font-family: Arial, sans-serif;
}
/* 为所有单元格设置内边距和边框 */
table th,
table td {
padding: 8px;
border: 1px solid #ddd;
text-align: center;
}
/* 为表头设置背景色 */
table thead th {
background-color: #f2f2f2;
}
/* 使用 :last-child 伪类选择器为表格的最后一行添加样式 */
table tr:last-child {
background-color: darkblue; /* 将背景色设置为深蓝色 */
color: white; /* 字体颜色设置为白色，以提高对比度 */
font-weight: bold; /* 字体加粗 */
}
/* 如果表格有 tbody，更精确的写法是：*/
/* table tbody tr:last-child {
background-color: darkblue;
color: white;
font-weight: bold;
} */在上面的 CSS 代码中，table tr:last-child 选择器精准地定位到了 <table> 元素内的最后一个 <tr> 元素。无论这个表格有多少行，或者这些行是通过 JavaScript 动态生成的，这个 CSS 规则都会自动应用到表格的末行。
示例代码效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格末行样式示例</title>
<style>
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
font-family: Arial, sans-serif;
}
table th,
table td {
padding: 8px;
border: 1px solid #ddd;
text-align: center;
}
table thead th {
background-color: #f2f2f2;
}
/* 核心样式：为表格的最后一行添加背景色 */
table tr:last-child {
background-color: darkblue;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<h1>动态表格末行样式演示</h1>
<div id="rezultat">
<!-- JavaScript 将在此处生成表格 -->
</div>
<script>
function factorial(n) {
if (n === 0 || n === 1) return 1;
let res = 1;
for (let i = 2; i <= n; i++) {
res *= i;
}
return res;
}
function generateTable(nr) {
if (nr < 2) {
return "<p>Prilagođeno samo za rad s brojevima većim od 1</p>";
}
let sum1 = 0, sum2 = 0, sum3 = 0;
let tableHtml = "<table id='tablica' class='tabClass'><thead><tr><th>N</th><th>N²</th><th>N!</th><th>Suma</th></tr></thead><tbody>";
for (let i = 1; i <= nr; i++) {
let val1 = i;
let val2 = i * i;
let val3 = factorial(i); // 使用独立的阶乘函数
let rowSum = val1 + val2 + val3;
tableHtml += "<tr><td>" + val1 + "</td><td>" + val2 + "</td><td>" + val3 + "</td><td>" + rowSum + "</td></tr>";
sum1 += val1;
sum2 += val2;
sum3 += val3;
}
// 添加汇总行
tableHtml += "<tr><td>" + sum1 + "</td><td>" + sum2 + "</td><td>" + sum3 + "</td><td>∑</td></tr>";
tableHtml += "</tbody></table>";
return tableHtml;
}
// 假设我们有一个输入框来获取 nr 值
// 这里直接设置一个示例值
const nrValue = 4; // 示例：生成4行数据
document.getElementById("rezultat").innerHTML = generateTable(nrValue);
</script>
</body>
</html>在上述示例中，即使表格是通过 JavaScript 动态生成的，CSS 规则 table tr:last-child 依然能够准确地识别并样式化表格的最后一行，而无需在 JavaScript 代码中手动添加类名或行内样式。
注意事项与最佳实践
- 选择器优先级: 如果您有其他更具体的 CSS 规则作用于 <tr> 元素，请确保 table tr:last-child 规则具有足够的优先级来覆盖它们。通常，它比 tr 或 table tr 等通用选择器具有更高的优先级。
- <thead> 和 <tfoot> 的影响: 如果您的表格结构包含 <thead> (表头) 或 <tfoot> (表尾) 元素，那么 table tr:last-child 可能会选择 <tfoot> 中的最后一行，而不是 <tbody> 中的最后一行。为了更精确地定位 <tbody> 中的最后一行，您可以使用 table tbody tr:last-child。
- 动态内容: 如前所述，这种 CSS 方法对于通过 JavaScript 动态添加或删除行的表格非常有效。浏览器会自动重新计算 :last-child，并相应地应用或移除样式。
- 可读性: 为汇总行或特殊行添加不同的背景色、字体样式等，可以显著提高表格的可读性和用户体验，帮助用户快速识别关键信息。
总结
利用 CSS 的 :last-child 或 :last-of-type 伪类选择器，我们可以非常便捷且高效地为 HTML 表格的最后一行添加自定义样式。这种方法不仅代码简洁，而且与动态生成的表格内容完美兼容，是提升表格视觉表现力的强大工具。掌握这些选择器，将使您在网页布局和样式设计方面拥有更大的灵活性和控制力。
