使用：第n個孩子循環通過兒童李元素

Question

好吧，我有一個情況，我有一組顏色，比如說10。

現在我想通過這個子元素的顏色列表，並給他們從1-10的顏色;但是我不知道我會事先得到多少孩子，所以我不知道該如何處理。

像，孩子1應該有顏色1，但孩子11也應該有顏色1（因爲顏色列表已經重新開始），顯然孩子2會得到顏色2，孩子12會得到顏色2等等，以及等等...

示例HTML：

<ul> 
    <li>Some Text</li> <!-- Color #1 --> 
    <li>Some Text</li> 
    <li>Some Text</li> 
    <li>Some Text</li> 
    <li>Some Text</li> 
    <li>Some Text</li> 
    <li>Some Text</li> 
    <li>Some Text</li> 
    <li>Some Text</li> 
    <li>Some Text</li> <!-- Color #10 --> 

    <li>Some Text</li> <!-- Color #1 --> 
    <li>Some Text</li>   
    <li>Some Text</li> 
    <li>Some Text</li> 
    <li>Some Text</li> 
    <li>Some Text</li> 
    <li>Some Text</li> <!-- Color #7 --> 
</ul> 

反正有:nth-child或別的東西，要做到這一點，如薩斯功能？

Answer 1

編輯/擴展ANSWER

您可以使用.your_class:nth-child(10n+1)，.your_class:nth-child(10n+2)等作爲選擇。 「10」是「步長」：例如3n將是每三分之一，因此10n是每十分之一。默認情況下，計數從零開始，所以10n僅適用於第10,20,30等。「+1」是偏移量1.

要從第一位開始，請使用10n+1。這將選擇第1，第11，第21等孩子。

如果你寫10n+2，這個選擇第2，第12，第22，第32等子

所以，你需要開始10n+1不同的選擇，10n+2高達10n+10包含你想要的不同設置10條規則應用。

這裏是codepen一個例子：http://codepen.io/anon/pen/grVvEo