css - 如何选择表中的最后一个行跨度？

Question

我有一张 table ，里面有一些 <td> s，其中几个有 rowspan属性。我正在尝试选择表中的最后一个，last-child 都不是也不last-of-type作品。

这是一个 jsfiddle:https://jsfiddle.net/p2cjwvj5/

<table class='myTable' border='1'>
    <tr>
        <td rowspan='3'>HEADER</td>
    </tr>
    <tr>
        <td>something</td>
    </tr>
    <tr>
        <td>something</td>
    </tr>
    <tr>
        <td rowspan='3'>HEADER2</td>
    </tr>
    <tr>
        <td>something2</td>
    </tr>
    <tr>
        <td>something2</td>
    </tr>
</table>

.myTable [rowspan]:last-of-type {
    color: red;
}

我正在尝试选择包含“HEADER2”的单元格。

这可能吗？我知道我可以通过标记最后一个 rowspan 来解决它与另一个类，只是想知道是否有更清洁的方法。谢谢!

Answer 1

您可以包装每组 <tr>进入 <tbody> , 然后选择最后一个 tbody通过使用 :last-of-type或 :last-child会好的。

.myTable tbody:last-of-type td[rowspan] {
  color: red;
}

<table class='myTable' border='1'>
  <tbody>
    <tr>
      <td rowspan='3'>HEADER</td>
    </tr>
    <tr>
      <td>something</td>
    </tr>
    <tr>
      <td>something</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td rowspan='3'>HEADER2</td>
    </tr>
    <tr>
      <td>something2</td>
    </tr>
    <tr>
      <td>something2</td>
    </tr>
  </tbody>
</table>