css – 选择具有特定类的每隔一行

我有一个简单的表结构

<table class="striped">
    <tr class="parent"><td></td></tr>
    <tr class="parent"><td></td></tr>
    <tr class="parent"><td></td></tr>
    <tr class="parent"><td></td></tr>
</table>

我可以轻松添加CSS：

.striped tbody tr.parent:nth-of-type(odd) { background:red; }

麻烦的是当你点击其中一个父< tr>它将展开的行并添加一个额外的< tr>细节行如下：

<table class="striped">
    <tr class="parent"><td></td></tr>
    **<tr class="detail"><td></td></tr>**
    <tr class="parent"><td></td></tr>
    <tr class="parent"><td></td></tr>
    <tr class="parent"><td></td></tr>
</table>

是否有纯CSS方式来保持原始条带化？ Here is a codepen显示两个表发生了什么

解决方法

如果您可以选择稍微更改HTML,则可以使用多个显式< tbody>元素并将子元素插入到同一个< tbody>内作为父母.这实际上具有语义意义,并​​且它将父级与其子组合在一起.

从https://developer.mozilla.org/en/docs/Web/HTML/Element/tbody起

multiple <tbody> elements are permitted (if consecutive),allowing the data-rows in long tables to be divided into different sections,each separately formatted as needed

例如.

.striped tbody:nth-of-type(odd) .parent { background:red; }

<table class="striped">
    <tbody>
        <tr class="parent"><td>Stuff</td></tr>
        <tr class="child"><td>child</td></tr>
    </tbody>
    <tbody><tr class="parent"><td>Stuff</td></tr></tbody>
    <tbody><tr class="parent"><td>Stuff</td></tr></tbody>
    <tbody><tr class="parent"><td>Stuff</td></tr></tbody>
</table>