Question

我试图选择除了该类的最后一行之外的某个类的行中的所有元素。我一直试图弄清楚这样做的正确语法，但我无法弄明白。

以下是我认为可以完成工作的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路线，我在下面回答。

Answer 1

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

兄弟组合子的性质使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?

Answer 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

Answer 3

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

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

使用CSS3选择所有行，但选择最后一个类

3 个答案: