Question

如您所见，我在两个分区内分别有两个表。 Here是jsFiddle的例子！我想要做的是更改firstDiv的表第一列和第三列的背景颜色，secondDiv的表格第二列和第四列，仅限CSS：）< / p>

<div id="firstDiv" style="float:left;margin-right:12px;">
<table width="200" border="1" cellpadding="8">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
     <div id="secondDiv">
<table width="200" border="1" cellpadding="8">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
       </div>

Answer 1

您正在查看nth-child与偶数/奇数选择器的典型用法。

以下应该做的伎俩。

#firstDiv td:nth-child(odd)
{
    background-color:#cecece;
}
#secondDiv td:nth-child(even)
{
    background-color:#cecece;
}

Fiddle

另一种变化： -

#firstDiv td:nth-child(2n+1)
{
    background-color:#cecece;
}
#secondDiv td:nth-child(2n+2)
{
    background-color:#cecece;
}

如果您想单独选择1st和3，那么您可以使用

#firstDiv td:nth-child(1), 
#firstDiv td:nth-child(3) {
    background-color:#cecece;
}
#secondDiv td:nth-child(2), 
#secondDiv td:nth-child(4) {
    background-color:#cecece;
}

参见support

Answer 2

使用:nth-child伪选择器。 See the fiddle

Answer 3

<强>编辑：

您也可以使用nth-child来解决问题，但所有浏览器都不支持nth-child

但是所有浏览器都支持以下方法..

<强> CSS：

#firstDiv td,
#firstDiv td + td + td{
    background-color:#cecece;
}

#firstDiv td + td,
#firstDiv td + td + td + td{
    background-color:#fff;
}


#secondDiv td + td,
#secondDiv td + td + td + td{
    background-color:#cecece;
}

#secondDiv td,
#secondDiv td + td + td{
    background-color:#fff;
}

SEE DEMO

Answer 4

您需要将CSS类应用于表格中每行的相关单元格（例如，第1个TD）。这样，将给出整个列具有不同颜色的印象。如果在CSS类定义中更改背景颜色，则按此设置时 - 更改将立即影响列中的所有单元格。

更改表的特定列的样式

4 个答案:

Fiddle