更改表格特定列的样式答案

【问题标题】：change style of table's specific columns更改表格特定列的样式
【发布时间】：2016-12-01 07:11:49
【问题描述】：

如您所见，我在两个部门中有两个表。 Here 是 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>

【问题讨论】：

使用:nth-child伪选择器？ jsfiddle.net/XRnWj/2

标签： css asp.net html-table

【解决方案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

【讨论】：

感谢 A.K 和 PSL :)，但我想知道更多！如何使用 class 而不是 id (
) 访问 div？
应该是 .firstDiv 而不是 #firstDiv。

【解决方案2】：

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

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

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

【讨论】：