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

Question

如何在浮动元素上使用css selector 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

您可以在LHS上使用4n+1进行奇数选择，在RHS上使用4n进行选择。

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Updated jsfiddle