css - 斑马条纹每两个 TR 连续使用 CSS。

Question

我想连续每两行灰色/条纹。很难解释。这是一张图片::
|-^-^-^-^-^-|
|-^-^-^-^-^-|
|--------------|
|--------------|
|-^-^-^-^-^-|
|-^-^-^-^-^-|
|--------------|
|--------------|
|-^-^-^-^-^-|
|-^-^-^-^-^-|
|--------------|
|--------------|

Answer 1

像这样？http://jsfiddle.net/GQNUV/1/

table tr:nth-child(4n-1), table tr:nth-child(4n)  {
    background: #ccc;
}

Answer 2

将其更改为您的偏好，它应该可以工作

tr:nth-child(4n+1) { color: green; }
tr:nth-child(4n+2) { color: green; }
tr:nth-child(4n+3) { color: red; }
tr:nth-child(4n+4) { color: red; }

Answer 3

如果标题有一行，请添加 thead 和 tbody 并将 css 更改为：

table tbody tr:nth-child(4n-1), table tbody tr:nth-child(4n)  {
    background: #ccc;
}

Answer 4

为了使其正常工作，ninnth-child()必须相同，但您更改添加到n. 对于这种情况，数字只能相隔一个数字。所以你需要4n+1and 4n, or 4n+2and4n+3等。

小提琴