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

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 方法来保留原始 strip 化？ Here is a codepen显示两个表发生了什么

Answer 1

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

来自 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>