使用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>