样式第一 table 由 td classname 标识的组行与另一行同级

Question

如何更改靠近兄弟行（由 td 标识）的一组行（由带有子项 class 的 td 标识）的第一行的样式与项目 class):

HTML:

<table>
  <thead>
  </thead>
  <tbody>
    <tr>
      <td class="item"></td>
    </tr>
    <tr>
      <td class="sub-item"><!-- I need to style this one --></td>
    </tr>
    <tr>
      <td class="sub-item"></td>
    </tr>
    <tr>
      <td class="sub-item"></td>
    </tr>
    <tr>
      <td class="item"></td>
    </tr>
    <tr>
      <td class="sub-item"><!-- I need to style this one --></td>
    </tr>
  </tbody>
</table>

我想用一个内嵌框来设置样式-阴影符合此条件的所有第一行。

我试过兄弟运算符没有成功：

CSS:

tr > td.item ~ tr > td.sub-item:first {}

Answer 1

使用当前代码，您必须使用 :nth-[last]-child()

tr:first-child + tr .sub-item, tr:nth-last-child(2) + tr .sub-item {
  background-color: red
}

<table>
  <thead>

  </thead>
  <tbody>
    <tr>
      <td class="item">1</td>
    </tr>
    <tr>
      <td class="sub-item">2<!-- I need to style this one --></td>
    </tr>
    <tr>
      <td class="sub-item">3</td>
    </tr>
    <tr>
      <td class="sub-item">4</td>
    </tr>
    <tr>
      <td class="item">5</td>
    </tr>
    <tr>
      <td class="sub-item">6<!-- I need to style this one --></td>
    </tr>
  </tbody>
</table>

此外，您可以在 tr 中添加一个 class 并实现您想要的效果。

.row + tr .sub-item {
  background-color: red
}

<table>
  <thead>

  </thead>
  <tbody>
    <tr class="row">
      <td class="item">1</td>
    </tr>
    <tr>
      <td class="sub-item">2<!-- I need to style this one --></td>
    </tr>
    <tr>
      <td class="sub-item">3</td>
    </tr>
    <tr>
      <td class="sub-item">4</td>
    </tr>
    <tr class="row">
      <td class="item">5</td>
    </tr>
    <tr>
      <td class="sub-item">6<!-- I need to style this one --></td>
    </tr>
  </tbody>
</table>

样式第一 table 由 td classname 标识的组行与另一行同级

Style first table row of group identified by td classname sibling to another row

html

css

html-table

tablerow