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

Question

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

<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+1 在 LHS 上进行奇数选择，在 RHS 上使用 4n 进行选择。

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>

Updated jsfiddle