Question

我想在每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个元素。

Answer 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>

每3个项目如何将CSS应用于3个项目？

1 个答案: