在CSS中组合nth-child（odd）和not（）

Question

我在组合以下两个CSS函数时遇到问题：nth-​​child（奇数）而不是（.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/

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

例如：

• 标题：RED
• 第1行：白色
• 隐藏线：白色
• 第2行：RED
• 第3行：白色
• 第4行：RED

我的桌子是动态的，所以我可以：

• 标题：RED
• 第1行：白色
• 隐藏线：白色
• 第2行：RED
• 隐藏线：RED
• 第3行：白色
• 第4行：RED
• 隐藏线：RED

你能帮助我吗？

由于

Answer 1

你可以使用2类.stripped＆amp; 。不剥离你吗？

<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