如何在每 3 个项目之后将 css 应用于 3 个项目？ [复制]答案

【问题标题】：How to apply css to 3 items after every 3 items? [duplicate]如何在每 3 个项目之后将 css 应用于 3 个项目？ [复制]
【发布时间】：2019-10-27 16:19:55
【问题描述】：

我想在每 3 个项目之后对每组 3 个项目应用不同的 css。比如：我希望 [1,2,3] 拥有 CSS class1 [4,5,6] 拥有 CSS class2，然后再次获得 [7,8,9] CSS class1。

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

我想在nth-of-type 和nth-child 都需要此样式的几个部分应用此样式。我试过li:nth-child(5n),li:nth-child(5n-1)，但每3个元素只需要2个元素。

【问题讨论】：

标签： html css

【解决方案1】：

这是你要找的吗？

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

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

【讨论】：

是的！它可以处理 n 个项目吗？
是的，它应该适用于任意数量的项目。我的版本略有不同，但想法相同，不幸的是我太慢了：jsfiddle.net/8hmpwaf7/2
当然，我已将答案中的
计数翻倍至 24。检查一下。

我对公式有点困惑。你的和@arkuuu 的工作方式相同。你能解释一下吗？

第一个 css 规则可以像 li{background: red;} 一样变得更简单。这会将所有

的背景颜色设置为红色。第二条规则超过了为特定

编写第一条规则。选择器是 6n=6th, 12th, 18th etc.. 6n-1= 5th, 11th, 17th etc and 6n-2=4th, 10th, 16th..