在n浮動元素上的nth-child選擇器

Question

如何在浮動元素上使用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奇怪的選擇和4n對RHS選擇。

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