jQuery设置交替颜色行答案

【问题标题】：jQuery set alternating color rowsjQuery设置交替颜色行
【发布时间】：2015-08-16 02:51:32
【问题描述】：

我正在寻找我的问题的具体答案。这就是，我有一行包含一定数量的 div（动态设置）。我想要的是交替地将div（3个div）的背景设置为另一种颜色，如下所示：这可以通过CSS奇偶伪类来完成还是应该通过jQuery来完成？

【问题讨论】：

您可以在 CSS 中使用 nth 选择器执行此操作。请您也可以在问题中发布您的 HTML。

【解决方案1】：

您可以使用：

li:nth-child(6n),
li:nth-child(6n - 1),
li:nth-child(6n - 2) {background: red;}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
</ul>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
</ul>

【讨论】：

糟糕，我花了这么长时间才找到它。

【解决方案2】：

您可以通过将其添加到您的 CSS 中来做到这一点。foo:nth-child(n+3)

更新：

ul li:nth-child(6n+4),
ul li:nth-child(6n+5),
ul li:nth-child(6n+6) {
  border: 1px solid red;
}

^ 虽然我不是粉丝，但它确实有效。

http://codepen.io/pacMakaveli/pen/JdWYoM

【讨论】：

@RoryMcCrossan 你说得对。我误读了这个问题，请查看更新的答案。

【解决方案3】：

通过添加 td:nth-child(3n) 试试这个，它可能对你有用

【讨论】：