CSS -特定类的第n个子(偶数)

Question

我有一个像这样的表

<tbody>
<tr class="row">...</tr>
<tr class="row--expanded">...</tr>
<tr class="row">...</tr>
<tr class="row--expandable">...</tr>
<tr class="row">...</tr>
<tr class="row">...</tr>
<tr class="row--expanded">...</tr>
</tbody>

Table由可以扩展的行组成(不是每一行，只有那些设置为可扩展的行)。我想有一个可选的斑马风格，在添加扩展选项之前，我使用

tbody {
tr:nth-child(even) {
...
}
}

但现在，因为我也有可选的扩展行，它不会工作。我如何应用第n子(偶数)，但只与类。row元素?

tbody {
.row:nth-child(even) {
...
}
}
``` Does not work

Answer 1

您应该能够在所有行上都有row类，尽管您可能需要更新一些css来允许:

<tbody>
<tr class="row">...</tr>
<tr class="row row--expanded">...</tr>
<tr class="row">...</tr>
<tr class="row row--expandable">...</tr>
<tr class="row">...</tr>
<tr class="row">...</tr>
<tr class="row row--expanded">...</tr>
</tbody>