jquery - 3 个备用 li 的独立样式

Question

我正在开发一个元素，并且正在使用 ul 和 li。

我必须更改 3 个备用李的背景。由于列表项来自后端，我不会知道列表项的数量。

我尝试使用 css3 子类，但无法实现。有什么方法可以使用 css 或 jquery 实现此目的吗？

.list-item li
{
  width:30%;
  display:inline-block;
 }

<ul class="list-item">
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
  <li>list item 7</li>
  <li>list item 8</li>
  <li>list item 9</li>
</ul>

列表 1、2、3、7、8 和 9 的背景颜色相同，列表 4,5 和 6 的背景颜色不同。

正如您在 image 中看到的那样，这里我使用表，并且使用 nth-child(even)/(odd) 属性来实现此目的。由于一些限制，我不能在这里使用表。因此需要使用 li 来实现这一点。

Answer 1

您需要设置第 6n、第 6n-1 和 6n-2 项的样式:

.list-item li
{
  width:30%;
  display:inline-block;
  background: #cfc;
 }
.list-item li:nth-child(6n-2),
.list-item li:nth-child(6n-1),
.list-item li:nth-child(6n){
  background: #ccf;
}

<ul class="list-item">
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
  <li>list item 7</li>
  <li>list item 8</li>
  <li>list item 9</li>
  <li>list item 10</li>
  <li>list item 11</li>
  <li>list item 12</li>
  <li>list item 13</li>
  <li>list item 14</li>
  <li>list item 15</li>
  <li>list item 16</li>
  <li>list item 17</li>
  <li>list item 18</li>
</ul>