css - CSS N：第一个有间隙的孩子

Question

我一直在尝试制作一个带有偶数行的彩色表格，其item颜色与奇数行不同。请看小提琴：http: //jsfiddle.net/x7XT5/

HTML：

<table>
  <tr class="item">
      <td>1</td>
  </tr>
<tr>
    <td>info</td>
</tr>
  <tr class="item">
      <td>2</td>
  </tr>
<tr>
    <td>info</td>
</tr>
  <tr class="item">
      <td>3</td>
  </tr>
<tr>
    <td>info</td>
</tr>
  <tr class="item">
      <td>4</td>
  </tr>
<tr>
    <td>info</td>
</tr>
</table>
​

CSS：

table tr.item:nth-child(2n)
{
    background-color: yellow;
}

table tr.item:nth-child(2n+1)
{
    background-color: red;
}

如何让它在css中工作？

UPD1

<tr>没有类item必须是白色背景。
<tr class="item">'在偶数/奇数位置上，背景必须是红色/黄色。​</p>

Answer 1

table tr
{
    background-color: yellow;
}

table tr.item:nth-child(2n+1)
{
    background-color: red;
}

更新：给你：

table tr {
    background-color: white;
}

table tr.item:nth-child(n)
{
    background-color: red;
}

table tr.item:nth-child(4n+1)
{
    background-color: yellow;
}

Answer 2

嘿，删除课程并签入您的tr和css文件

并轻松创建

现场演示http://jsfiddle.net/x7XT5/1/

和

第二种方法是现场演示http://jsfiddle.net/x7XT5/3/

更新了现场演示 http://jsfiddle.net/x7XT5/5/

Answer 3

试试这个。无需设置第 n 个孩子。

http://jsfiddle.net/x7XT5/2/

您也可以使用奇数和偶数关键字。

Answer 4

首先，我认为，您应该使用 :nth-of-type 而不是 :nth-child，但不幸的是，:nth-of-type 不适用于类，所以我不知道任何纯 CSS 解决方案。

您可以随时使用：

table tr.item:nth-of-type(4n+3)
{
    background-color: yellow;
}

table tr.item:nth-of-type(4n+1)
{
    background-color: red;
}

适用于此示例。