仅在一列中的备用行 - CSS

Question

如何在表格中的一列中为备用行着色？那是什么代码？

Answer 1

正如@ afranz409所说，理想的解决方案是创建一个类。但是，这可以通过CSS特定的解决方案来完成，具有有限的浏览器功能（IE浏览器都没有＆lt; 9）：

table tr:nth-child(2n) > td:nth-child(1) {
    background-color: #eee;
}

换句话说，对于第一个表格列中的每个备用行，请填充背景颜色#eee。如JsFiddle所示。

对于更多跨浏览器兼容的解决方案，我建议在jQuery中使用此选择器：

$('table tr:nth-child(2n) > td:nth-child(1)').css("background-color", "#eee");

Answer 2

您将不得不在特定<td>上设置您想要着色的课程，而不是像<tr>那样设置课程

Answer 3

您可以使用nth-child()选择器。

请参阅：http://jsfiddle.net/thirtydot/2NxE6/

<强> CSS：

tr:nth-child(2n) > td:nth-child(4) { /* highlight column 4 */
    background: #ccc
}

这适用于现代浏览器，但在版本9之前它无法在Internet Explorer中使用。

如果您需要在早期版本的Internet Explorer中使用它，可以选择以下选项：

• 使用http://selectivizr.com/之类的东西在旧版本的IE中启用重要的CSS3支持。
• 使用jQuery代替选择器 - 如果您的网站已经依赖于jQuery，这是一个不错的选择。
• 使用另一个建议将相关类添加到相关td元素的答案。

Answer 4

对于第一列，您可以执行以下操作：

tr:nth-child(odd) > td:first-child {
  background: green;
}
tr:nth-child(even) > td:first-child {
  background: blue;
}

这实际上取决于您想要着色的列。如果是第x列，您可以尝试td:nth-child(x)。