如何用纯CSS为最后一个.active类<tr>下的<td>设置样式？

你需要给动态序列表格里最后一个带.active类的<tr>内的<td>加样式，用:last-of-type没效果，又没法用nth-child这类依赖固定位置的选择器，下面是可行的纯CSS方案：

原代码问题分析 #

先看你原来的代码，:last-of-type是按元素类型匹配最后一个元素，不是按类。所以tr.row.active:last-of-type只会选中既是最后一个<tr>又带.active的元素，这显然不符合你的需求——毕竟最后一个<tr>可能不带.active。

原代码示例 #

CSS

tr.row td {
  border: 1px solid black;
  padding: 5px 12px;
}

tr.row.active:last-of-type td {
  background: blue;
}

HTML

<table>
  <tbody>
    <tr class="row">
      <td>1st</td>
      <td>Row</td>
    </tr>
    <tr class="row active">
      <td>2nd</td>
      <td>Row</td>
    </tr>
    <tr class="row active">
      <td>3rd</td>
      <td>Row</td>
    </tr>
    <tr class="row active">
      <td>4th</td>
      <td>Row</td>
    </tr>
    <tr class="row">
      <td>5th</td>
      <td>Row</td>
    </tr>
  </tbody>
</table>

解决方案：相邻兄弟选择器反向排除 #

思路很简单：先给所有.active的<tr>里的<td>加上目标样式，再把那些后面紧跟着另一个.active兄弟的.active元素的<td>样式重置回去。这样只有最后一个.active元素（后面没有其他.active）会保留样式。

修改后的CSS代码：

tr.row td {
  border: 1px solid black;
  padding: 5px 12px;
}

/* 给所有.active行的td设置蓝色背景 */
tr.row.active td {
  background: blue;
}

/* 重置后面还有active兄弟的行的td背景 */
tr.row.active + tr.row.active td {
  background: transparent; /* 换成你需要的初始背景色即可 */
}

替换后，最后一个.active行的<td>会显示蓝色，其他.active行保持原样，而且不管.active元素的位置怎么动态变化，这个逻辑都能生效。

内容的提问来源于stack exchange，提问作者Bhuwan