交替表颜色答案

【问题标题】：Alternating table color交替表颜色
【发布时间】：2012-02-28 17:01:01
【问题描述】：

我无法让我的 CSS 看起来正确。我想在我的桌子上交替使用颜色，但它似乎不起作用。这是我的 CSS：

table.className tbody tr:nth-child(even){
background-color: white;
}

table.className tbody tr:nth-child(odd){
background-color: grey;
}

【问题讨论】：

您使用的是哪种浏览器？你确定它支持 nth-child 吗？
你能展示一些周围的css和html代码吗？
查看 quirksmode.org/css/contents.html 并搜索 ":nth-child()" 以查看您的浏览器是否支持该属性。 IE8 不支持选择器，所以在用纯 CSS 解决这个问题之前我会稍等片刻。
试试没有 tbody 的 CSS。
感谢您提供的链接，这是一个非常有用的表格，可以作为参考。

标签： css

【解决方案1】：

您的代码看起来不错。可能是两件事，您使用的 IE 版本太旧（我相信 IE8 及以下版本不支持此功能），或者您在其他地方设置了这些样式，并附加了 !important。

【讨论】：

啊，是的，我在 IE8 中这样做，所以这似乎是问题所在。耻辱 IE8 不支持这个。谢谢！

【解决方案2】：

没有看到 HTML，有几种可能性：

类名不匹配
tbody 标记丢失（无论哪种方式，CSS 选择器中都不需要tbody）

【讨论】：

【解决方案3】：

这可能对您不起作用有几个原因。首先，您使用的 CSS 代码是 CSS3，您使用的浏览器可能不支持：http://www.impressivewebs.com/css3-browser-support/

这可能不起作用的另一个原因是您在 CSS 中包含了“tbody”标签，这表明您的 html 表格是这样设置的。这实际上是一些开发人员放弃的标签，如果您的 html 表格没有“”标签，那么您必须从 CSS 中删除它才能使其正常工作。

【讨论】：

【解决方案4】：

鉴于已确定您使用的是不支持 CSS 中的 :nth-child 的 IE8，您可以使用 jQuery 实现相同的功能以获得更好的跨浏览器支持：

$(function() {
  $("table.className tr:nth-child(even)").css('background-color','white');
  $("table.className tr:nth-child(odd)").css('background-color','grey');
});

【讨论】：