如何编写CSS选择器选中每行首个带target类的单元格？

给定如下HTML表格结构，需要编写CSS选择器仅选中每行中第一个带有target类的单元格（即示例中的Cell 2和Cell 5）。每行中带target类的单元格位置随机，但每行至少存在一个该类单元格。尝试使用td.target:first-of-type，但该选择器先应用伪类再筛选类，仅能选中Cell 5，需先筛选类再选取首个。请问是否可行？

<table>
  <tr>
    <td>Cell 1</td>
    <td class="target">Cell 2</td>
    <td class="target">Cell 3</td>
    <td>Cell 4</td>
  </tr>
  <tr>
    <td class="target">Cell 5</td>
    <td>Cell 6</td>
    <td>Cell 7</td>
    <td class="target">Cell 8</td>
  </tr>
</table>

可行，使用以下CSS选择器即可实现需求：

tr td.target:not(.target ~ .target) {
  /* 自定义样式 */
}

原理说明 #

• td.target：先筛选出所有带有target类的单元格；
• :not(.target ~ .target)：排除掉所有位于其他.target元素之后的单元格（兄弟选择器~会匹配所有在指定元素之后的同级元素，无论中间是否有其他元素）；
• 最终剩下的就是每行中第一个出现的.target单元格，完全符合需求。

为什么td.target:first-of-type不行 #

:first-of-type伪类的作用是选中父元素下同类型元素中的第一个，它不会考虑类选择器的筛选结果。比如第一行中，第一个td是Cell 1（不带target类），所以td.target:first-of-type找不到符合条件的元素；而第二行第一个td刚好带target类，所以能选中Cell 5，这就是它无法满足需求的原因。

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