使用 CSS3 选择除最后一行之外的所有行答案

【问题标题】：Selecting all rows but the last of class with CSS3使用 CSS3 选择除最后一行之外的所有行
【发布时间】：2012-11-09 01:31:45
【问题描述】：

我正在尝试选择某个类的行中的所有元素，但该类的最后一行除外。我一直在尝试找出正确的语法来这样做，但我就是想不通。

这是我认为可以完成这项工作的 CSS：

tr.ListRow:not(:last-of-type) td {
    padding: 14px;
    border-bottom-color: #768ca5;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

这是 HTML，因此您可以了解我要做什么。

<tbody>
    <tr class="Row ListRow">..........</tr> <!-- CSS applied to <td> tags within -->
    <tr class="Graph">..........</tr> 
    <tr class="AltRow ListRow">........</tr> <!-- CSS applied to <td> tags within -->
    <tr class="Graph">..........</tr> 
    <tr class="Row ListRow">..........</tr> <!-- CSS applied to <td> tags within -->
    <tr class="Graph">..........</tr> 
    .
    .
    .
    .
    <tr class="AltRow ListRow">........</tr> <!-- CSS NOT applied to this last row of class ListRow -->
    <tr class="Graph">..........</tr> 
</tbody>

编辑：我最终选择了一条 javascript 路线，我在下面回答了该路线。

【问题讨论】：

.xyz:last-child 不会获取类为 xyz 的所有元素，然后找到该集合中的最后一个元素，反之亦然，它将抓取最后一个子元素，然后如果它有一个类xyz 将匹配。 :last-of-type、nth-child 和其他所有内容也是如此。所以没有办法找到某个类的最后一个元素。

标签： html css css-selectors

【解决方案1】：

目前无法使用 CSS 选择给定类的最后出现的元素，或类中除最后一个元素之外的所有元素。 :last-of-type 在这里不起作用，因为它表示“最后一个 tr 元素”，而不是“与此复合选择器匹配的最后一个元素”，并且您的最后一个 tr.ListRow 不是最后一个 tr。

兄弟组合器的性质使得use an override rule for the first element of a certain class 成为可能。然而，这对于 last 是不可行的。

您将不得不在最后一个 tr.ListRow 中添加一个特殊类，例如 Last，然后选择 tr.ListRow:not(.Last)，或者找到其他解决方法。

另见：Is it possible using current browsers to use pseudo-classes to detect first and last of a certain class?

【讨论】：

请注意，":not" 目前还不能在 IE 上运行。
确实，虽然“到目前为止”不再准确 - IE 从版本 9 开始已经支持它，该版本已经发布了一段时间。此外，如果一个问题是专门询问 CSS3 选择器，通常可以安全地假设 IE 支持是无关紧要的。问题中提到的许多选择器也不适用于 IE
同意。似乎总是忘记人们仍在使用 IE8 及以下版本。如此悲伤，悲伤的世界。

【解决方案2】：

你可以通过以下方式做到这一点

css

.link td {
    background-color:#066;
}
tr.link:last-child td{
    background-color: lime;
}

html

<table width="200" border="1"><tbody>
  <tr>
    <td align="center" valign="middle">1</td>
  </tr>
  <tr class="link">
    <td align="center" valign="middle">2 with Link Class</td>
  </tr>
  <tr>
    <td align="center" valign="middle">3</td>
  </tr>
  <tr class="link">
    <td align="center" valign="middle">4 with Link Class</td>
  </tr>
  <tr>
    <td align="center" valign="middle">5</td>
  </tr>
  <tr class="link">
    <td align="center" valign="middle">6 with Link Class</td>
  </tr>
</tbody></table>

查看jsFiddle File

【讨论】：

【解决方案3】：

由于其他人指出单个选择器无法做到这一点，因此我选择使用 jQuery 来完成此任务。

function RemoveLastRowBotBorder() {
    var rows = $(".ListRow");
    $(rows[rows.length - 1]).removeClass("ListRow");
}

【讨论】：

您可以使用 jQuery 选择器 执行此操作：tr.ListRow:last - 除非您有多个 tbody 或 thead 或 tfoot 元素，在这种情况下它变得有点复杂。