使用css：nth-​​child选择器样式化列表项

Question

我有ul列表项，我希望它们的样式类似于下图。 是否可以使用css nth-child选择器或仅使用css来以其他方式设置样式。

ul, ol {
  list-style: none;
  padding: 0;
}
li {
  text-align: center;
  line-height: 2;
  background: slategrey;
  border:1px solid white;
}
li:nth-child(1) {
  background: lightsteelblue;
}

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>  
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
    <!--There may be more list items -->
  </ul>

Answer 1

使用li:nth-child(4n + 1), li:nth-child(4n + 4)：

ul, ol {
  list-style: none;
  padding: 0;
}
li {
  text-align: center;
  line-height: 2;
  background: slategrey;
  border:1px solid white;
}
li:nth-child(4n + 1), li:nth-child(4n + 4) {
  background: lightsteelblue;
}

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>  
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
    <!--There may be more list items -->
  </ul>

Answer 2

使用选择器li:nth-child(4n), li:nth-child(4n+1)

ul, ol {
  list-style: none;
  padding: 0;
}
li {
  text-align: center;
  line-height: 2;
  background: slategrey;
  border:1px solid white;
}
li:nth-child(4n), li:nth-child(4n+1)  {
  background: lightsteelblue;
}

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>  
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
    <!--There may be more list items -->
  </ul>

Answer 3

为什么不将它们与班级归类？即使您可以对第n个孩子进行操作，但是要更改某些内容也很困难，您还必须更改公式。

ul, ol {
  list-style: none;
  padding: 0;
}
li {
  text-align: center;
  line-height: 2;
  border:1px solid white;
}

li.lightsteelblue {
  background: lightsteelblue;
}

li.slategrey {
  background: slategrey;
}

<ul>
    <li>One</li>
    <li class="lightsteelblue">Two</li>
    <li>Three</li>
    <li>Four</li>
    <li class="slategrey">Five</li>
    <li>Six</li>  
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
    <!--There may be more list items -->
  </ul>