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

Question

我有一个简单的表结构

<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方式来保持原始条带化？这是一个用于显示两个表发生情况的代码

Answer 1

如果您可以选择稍微更改 HTML，则可以使用多个显式<tbody>元素并将子元素插入与<tbody>父元素相同的位置。这实际上具有语义意义，并​​且它将父级与其子级分组。

来自https://developer.mozilla.org/en/docs/Web/HTML/Element/tbody

允许多个<tbody>元素（如果连续），允许将长表中的数据行分为不同的部分，每个部分根据需要单独格式化

例如

.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>