css - 在 CSS 中组合第 nth-child(odd) 和 not()

Question

我在组合以下两个 CSS 函数时遇到问题:nth-​​child(odd) 和 not(.not-striped)

HTML:

<table class="table-striped">
<tr>
    <th>Header</th>
</tr>
<tr>
    <td>Line 1</td>
</tr>
<tr class="not-striped">
    <td>Hidden line</td>
</tr>
<tr>
    <td>Ligne 2</td>
</tr>
<tr>
    <td>Line 3</td>
</tr>
<tr>
    <td>Line 4</td>
</tr>
</table>

CSS:

.table-striped tbody > tr:nth-child(odd):not(.not-striped) > td,
.table-striped tbody > tr:nth-child(odd):not(.not-striped) > th {
    background-color:#f00;
}

JSFIDDLE:http://jsfiddle.net/barbuslex/9Zck6/1/

JSFIDDLE2:http://jsfiddle.net/barbuslex/4GLMZ/1/

我希望非条纹线与顶线的颜色相同，而不会中断下一行的交替颜色。

例如:

• 标题:红色
• 第 1 行:白色
• 隐藏线:白色
• 第 2 行:红色
• 第 3 行:白色
• 第 4 行:红色

我的表是动态的，所以我可以:

• 标题:红色
• 第 1 行:白色
• 隐藏线:白色
• 第 2 行:红色
• 隐藏线:红色
• 第 3 行:白色
• 第 4 行:红色
• 隐藏线:红色

你能帮帮我吗？

谢谢

Answer 1

您可以使用 2 类 .stripped 和 .not-stripped 不是吗？

<table class="table-striped">
    <tr class="striped">
        <th>Header</th>
    </tr>
    <tr class="not-striped">
        <td>Line 1</td>
    </tr>
    <tr class="not-striped">
        <td>Hidden line</td>
    </tr>
    <tr class="striped">
        <td>Ligne 2</td>
    </tr>
    <tr class="not-striped">
        <td>Line 3</td>
    </tr>
    <tr class="striped">
        <td>Line 4</td>
    </tr>
</table>

CSS:

.striped
{
    background-color:#F00
}

.not-striped
{
    background-color:#FFF
}

我的结果:

JSFiddle : enter link description here