将 nth-child 应用于单个类的问题。答案

【问题标题】：Issue applying nth-child to a single class.将 nth-child 应用于单个类的问题。
【发布时间】：2011-12-02 19:42:40
【问题描述】：

首先，非常感谢您提前抽出时间。

我在费城的一所高等教育机构工作。我们正在尝试利用 nth-child 伪类使表格中的每一行都变成灰色。

我在 Styles.css 文件中编写的代码行是

table.oddrows tr:nth-child(2n+3) {background-color: #eeeeee;}

我使用 2n+3 是因为表格的第一行将是比其他行更深的灰色，因为它将是标题，所以我希望它开始将背景颜色应用于第三行，然后每两行之后的行（即 3、5、7 等）

我们使用 Ektron 的 CMS（版本 8.01 SP1），无论出于何种原因，该类都不会出现在可用的类列表中，当我尝试手动应用它时（即手动将 <table class="oddrows" width="500"><tbody> 放入正文中的代码）它仍然不起作用。

我已多次清除缓存，但仍处于空白状态。（我使用的是 IE 8，作为记录）

有什么想法吗？我读到的所有内容都表明我的语法是正确的，我已经准备好扯掉我的头发了。

再次感谢您的宝贵时间！

【问题讨论】：

【解决方案1】：

IE8 不支持nth-child 选择器。对于 IE，它仅在 9 及更高版本中可用。

【讨论】：

【解决方案2】：

为了让类似的东西工作，你可能不得不偏离纯 CSS，并使用一些 jQuery。如果您已经将 jQUery 用于站点中的其他内容，那么这很容易，因为它只会在您的文档就绪语句中添加几行，如下所示：

jQuery(document).ready(function() {
   $('.oddrows tr:nth-child(2n+3)).addClass("darker");  
});

你也会有一个 .darker 的 CSS 类：

.darker {background-color:#eee}

现在，如果您还没有使用 jQuery（或没有选项），这显然行不通。

【讨论】：