2

我在组合以下两个 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 行：红色
  • 隐藏线：红色

你能帮助我吗 ？

谢谢

4

1 回答 1

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： 在此处输入链接描述

于 2013-05-23T10:01:18.343 回答