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方法只保留原始条带化？ Here is a codepen显示两个表格的内容

Answer 1

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

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

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

E.g。

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

Answer 2

在任何给定时间是否只有一个.detail元素？

如果是这样，你可以“重置”该元素之后TR的背景，如下所示：

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

<table class="striped">
    <tr class="parent"><td>A</td></tr>
    <tr class="detail"><td>inserted</td></tr>
    <tr class="parent"><td>B</td></tr>
    <tr class="parent"><td>C</td></tr>
    <tr class="parent"><td>D</td></tr>
    <tr class="parent"><td>E</td></tr>
    <tr class="parent"><td>F</td></tr>
    <tr class="parent"><td>G</td></tr>
</table>

由于此插入的表行将所有后续TR的“索引”更改为1，因此在此详细信息行后面的偶数具有红色背景将以“正确”方式继续条带化。（并且跟随奇数行的背景必须是“空的”，否则那些仍将具有来自第一个规则的红色背景。）

当然，只要您在表格中插入多个.detail行，就不会再那么简单了。

Answer 3

您遇到的问题是nth-of-type正在搜索该类型。它也计算detail，因为它与parent的类型相同。

我的建议：翻拍<td>。一个是<parent> s，另一个是<detail> s。

parent:nth-of-type(odd) {
    background:red;
}

parent, detail{
    display:table-row;
}
tr{
    display:table-cell;
}

<table class="striped">
    <tr><parent>one</parent></tr>
    <tr><detail>detail</detail></tr>
    <tr><parent>two</parent></tr>
    <tr><parent>three</parent></tr>
    <tr><parent>four</parent></tr>
</table>

这样就可以了。

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

3 个答案: