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

我正在做一个项目，我正在使用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来实现。

最佳答案

您需要设置第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>