Question

我有一个类似于这个例子的表

<tr class="line">...</tr>
<tr class="line">...</tr>
<tr class="line">...</tr>
<tr class="sum-line" id="i-know-this-one">...</tr>
<tr class="sum-line">...</tr>
<tr class="sum-line">...</tr>

使用css（无jquery），如何选择最后一个.line？也就是tr之前的最后#i-know-this-one。

请注意，#i-know-this-one之前的行数量会因我的上下文而异，因此我们不能简单地从表格的顶部或底部计算nth-child

Answer 1

如果您使用php或其他语言输出表格，则将类或ID添加到最后一个tr.line。然后将样式应用到它。

如果它适用于您的问题，请使用此功能。

＆＃13;

tr:nth-last-child(3) {
  background-color: lime;
}

＆＃13;

<table>
  <tr class="line"><td>...</td></tr>
  <tr class="line"><td>...</td></tr>
  <tr class="line"><td>...</td></tr>
  <tr class="sum-line" id="i-know-this-one"><td>...</td></tr>
  <tr class="sum-line"><td>...</td></tr>
  <tr class="sum-line"><td>...</td></tr>
</table>

＆＃13;

或另一种方式：将.body用于.line，将tfoot用于.sum-line。那时不会有任何问题。

＆＃13;

   tbody tr:last-child {
      background-color: lime;
    }

＆＃13;

    <table>
      <tbody>
        <tr class="line"><td>...</td></tr>
        <tr class="line"><td>...</td></tr>
        <tr class="line"><td>...</td></tr>
      </tbody>
      <tfoot>
        <tr class="sum-line" id="i-know-this-one"><td>...</td></tr>
        <tr class="sum-line"><td>...</td></tr>
        <tr class="sum-line"><td>...</td></tr>
      </tfoot>
    </table>

＆＃13;

可变长度表

1 个答案: