1

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

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

4

3 回答 3

2

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

同级组合器的性质使得对某个类的第一个元素使用覆盖规则成为可能。但是，这对于最后一个是不可行的。

您将不得不在 last tr.ListRow， likeLast和 select添加一个特殊的类tr.ListRow:not(.Last)，或者找到一种不同的方法来解决这个问题。

另请参阅：是否可以使用当前浏览器使用伪类来检测某个类的第一个和最后一个？

于 2012-11-08T16:57:55.607 回答
0

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

function RemoveLastRowBotBorder() {
    var rows = $(".ListRow");
    $(rows[rows.length - 1]).removeClass("ListRow");
}
于 2012-11-08T17:03:53.907 回答
0

您可以通过以下方式执行此操作

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 文件

于 2012-11-08T17:01:02.443 回答