我有一张桌子。
它目前包含一个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。我该怎么做？
【问题讨论】：
标签： html css html-table css-tables
“始终以最后一行为目标，无论它在哪里”的一种简单方法就是
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> 元素的顺序未强制执行，因此您实际上可以在 <tbody> 之前放置一个 <tfoot>，并使用与输出相同的表，在这种情况下实际上是最后一个 <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;
}
编辑：
我忘了考虑空的<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;
}
【讨论】：
tr 为空，则失败
<tr> 不会在视觉上做任何事情，它会针对它的风格。该要求没有说明最后一个 <tr> 是空的（CSS 无法做到这一点），但它确实声明应该忽略空的 <tfoot>，现在已将其添加到答案中。
<tbody> 之后出现空<tfoot> 的问题，尽管始终使用以下顺序可能很容易解决这个问题：thead、tfoot、tbody。使用纯 CSS 不可能做到这一点的主要原因在于 CSS 只能“前进”（可以定位 tbody 之后的空 tfoot (tbody + tfoot:empty)，但在这种情况下，您实际上希望定位 @ 987654345@ 在那里，这是无法完成的（不幸的是，即使像 tbody:not(+ tfoot:empty) 这样的东西也不能，因为 not 伪类只允许排除兄弟关系的“简单选择器”（+）
不确定您所说的以表中的最后一行为目标是什么意思。
如果你想定位你会使用的最后一个 tfoot：
table tfoot tr:last-of-type
如果您想定位 tbody 中的最后一行，您可以使用：
table tbody tr:last-of-type
如果你想定位到你会使用的tad中的最后一行：
table thead tr:last-of-type
如果您想定位 tfoot 中的最后一行，除非它是空的，否则您想定位 tbody 中的最后一行，那么您将需要使用 JavaScript。
这是一个小提琴链接供您查看代码。 Fiddle Link
【讨论】：
这里是另一种方式。
table
{
border-collapse:collapse;
}
tr{
border-bottom: 1px solid #000;
}
table :last-child >:last-child > td {
background-color: red
}<table>
<tr>
<td>a
</td>
<td>a
</td>
</tr>
<tr>
<td>b
</td>
<td>b
</td>
</tr>
<tr>
<td>v
</td>
<td>v
</td>
</tr>
</table>
--------------
<table>
<tr>
<td>a
</td>
<td>a
</td>
</tr>
<tr>
<td>b
</td>
<td>b
</td>
</tr>
<tr>
<td>v
</td>
<td>v
</td>
</tr>
<tfoot>
<tr>
<td>v
</td>
<td>v
</td>
</tr>
</tfoot>
</table>
------------
<table>
<thead>
<tr>
<td>r</td>
<td>r</td>
</tr>
</thead>
<tr>
<td>a
</td>
<td>a
</td>
</tr>
<tr>
<td>b
</td>
<td>b
</td>
</tr>
<tr>
<td>v
</td>
<td>v
</td>
</tr>
<tfoot>
<tr>
<td>v
</td>
<td>v
</td>
</tr>
</tfoot>
</table>解决方案很简单。首先，您在我的 sn-p table 中对表进行寻址。然后你必须处理最后一个元素，因为我们有三个级别 (thead or tbody or tfoot > td > 'tr')，我们需要处理最后一个元素 3 次
【讨论】：
完全编辑我的答案。对于那个很抱歉。这里的问题是你无法判断最后一行是否有任何 CSS 内容。
所以纯粹使用 CSS 是行不通的，因为该行仍然存在，即使它是空的。所以它将是最后一行的样式，里面什么都没有。我会查看 Javascript，或者如果您正在生成此服务器端，请在最后一行添加一个类，以便您可以自定义样式。
【讨论】：