Question

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

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

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

Answer 1

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

Answer 2

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

班级名称不匹配
缺少tbody标记（无论哪种方式，CSS选择器中都不需要tbody）

Answer 3

为什么这可能不适合你，有几个原因。首先，您使用的CSS代码是CSS3，在您使用的浏览器中可能不受支持：http://www.impressivewebs.com/css3-browser-support/

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

Answer 4

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

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

交替的桌子颜色

4 个答案: