n个浮动元素上的css nth-child选择器

Question

如何nth-child(...)在浮动元素上使用css选择器来实现此结果？

<ol>
    <li style="background: red;">Text</li>
    <li>Text</li>
    <li>Text</li>
    <li style="background: red;">Text</li>
    <li style="background: red;">Text</li>
    <li>Text</li>
    <li>Text</li>
    <li style="background: red;">Text</li>
    <li style="background: red;">Text</li>
    <li>Text</li>
    <li>Text</li>
    <li style="background: red;">Text</li>
    <li style="background: red;">Text</li>
    <li>Text</li>
    <li>Text</li>
    <li style="background: red;">Text</li>
    <li style="background: red;">Text</li>
    <li>Text</li>
    <li>Text</li>
    <li style="background: red;">Text</li>
</ol>

DEMO

Answer 1

您可以使用4n+1LHS上的奇数选择和4nRHS 上的选择.

ol li:nth-child(4n+1),
ol li:nth-child(4n) {
    background: red;
}

ol {
  width: 270px;
  padding-left: 10px;
}
li {
  float: left;
  width: 100px;
  margin: 0 15px;
}
ol li:nth-child(4n+1),
ol li:nth-child(4n) {
  background: red;
}

<ol>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
  <li>Text</li>
</ol>

更新了jsfiddle