CSS以数组[重复]为目标元素

Question

这个问题在这里已有答案：

• How to color a specific amount of rows from a table? 1回答

CSS中是否有任何方法可以定位数字集中的元素？就像我有：

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

所以，我想先用li设置3个color:red，然后用li设置接下来的3个color:blue然后重复。

我不确定它是否可能与:nth。

尝试这样的事情，但没有帮助

li:nth-of-type(n+3) {
  color:red;
}

Answer 1

您可以使用:nth-child但是您需要设置两组规则，两者都是一次选择三个元素的组。

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

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

Answer 2

您可以为li设置默认颜色，并为每行6个元素中的最后一个（或第一个）三个样式设置不同的颜色：

li {color: red}

li:nth-child(6n+4), 
li:nth-child(6n+5), 
li:nth-child(6n+6) {
  color: blue;  
}

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