html - 如何正确定位使用 tfoot、tbody 和 thead 的表中的最后一个 tr？

Question

我有一张 table 。

它目前包含一个 thead、tbody 和 tfoot 部分。

我想定位到表中的最后一行 (tr)。

如果我使用 tr:last-of-type，它会导致 3 行被定位:

这是因为它针对的是 thead 中的最后一个 tr，tbody 中的最后一个 tr，以及 tfoot 中的最后一个 tr。

我不希望它定位到 3 行。我只希望它以表格中的最后一行为目标。

我可以使用 tfoot tr:last-of-type，只要 tfoot 中至少有一个 tr 元素，它就可以工作:

但是，如果 tfoot 为空，或者表格缺少 tfoot 元素，则不会定位任何内容。

我想始终定位表格的绝对最后一行，仅使用 CSS。我该怎么做？

Answer 1

“始终以最后一行为目标，无论它在哪里”的一种简单方法就是

table > *:last-child > tr:last-of-type {
	background-color: #0f0;
}

<table>
	<thead>
		<tr>
			<th>A</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>a</td>
		</tr>
		<tr>
			<td>b</td>
		</tr>
	</tbody>
</table>

<table>
	<thead>
		<tr>
			<th>A</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>a</td>
		</tr>
		<tr>
			<td>b</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>c</td>
		</tr>
	</tfoot>
</table>

虽然有一个问题，但这将按照您的描述进行。 <thead>的顺序, <tbody>和 <tfoot>元素不是强制的，所以你实际上可以放一个 <tfoot>在 <tbody> 之前使用与输出相同的表，在这种情况下实际上是最后一个 <tr>将被选中，这在视觉上不是最后一个 <tr> .

这需要一些额外的技巧:

/* the optimistic true last <tr> */
table > :last-child > tr:last-of-type,
/* any last <tr> within a <tfoot> */
table tfoot > tr:last-of-type {
    background-color: #0f0;
}

/* reset any style in the true last <tr> if its parent is
   preceded by a `<tfoot>` */
table > tfoot ~ :last-child > tr:last-of-type {
    background-color: initial;
}

working fiddle

编辑:我忘了带空<tfoot>考虑到元素，这需要使用 :not和 :empty伪类(旧浏览器不支持)，看起来像:

/* the optimistic true last <tr> */
table > :last-child > tr:last-of-type,
/* any last <tr> within a <tfoot> */
table tfoot > tr:last-of-type {
    background-color: #0f0;
}

/* reset any style in the true last <tr> if its parent is
   preceded by a `<tfoot>` */
table > tfoot:not(:empty) ~ :last-child > tr:last-of-type {
    background-color: initial;
}

updated fiddle