1

如您所见，我在两个部门内各有两张桌子。这是 jsFiddle 示例！我想要做的是更改 firstDiv表格第一列和第三列、secondDiv表格第二列和第四列的背景颜色，CSS仅限:)

<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>
4

4 回答 4

2

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

以下应该可以解决问题。

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

小提琴

另一种变化：-

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

见支持

于 2013-05-28T04:53:57.507 回答
2

使用:nth-child伪选择器。看小提琴

于 2013-05-28T04:57:03.390 回答
1

编辑：

您也可以通过使用来实现它，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;
}

看演示

于 2013-05-28T05:04:37.297 回答
0

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

于 2013-05-28T05:00:06.527 回答