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">'背景必须为红色/黄色。

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/

你也可以使用奇数＆amp; eeven keywords。

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;
}

适用于此示例。

CSS Nth孩子有差距

4 个答案: