使用：nth-​​child循环遍历子LI元素

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或其他东西（例如Sass函数）来执行此操作？

Answer 1

编辑/扩展答案

您可以使用.your_class:nth-child(10n+1)，.your_class:nth-child(10n+2)等作为选择器。 ＆＃34; 10＆＃34;是＆＃34;步长＆＃34 ;:例如3n将是每三分之一，所以10n是每十分之一。默认情况下，计数从零开始，因此仅10n将适用于10日，20日，30日等。＆＃34; + 1＆＃34;是1的偏移量。

从头号开始，您使用10n+1。这将选择第1，第11，第21等孩子。

如果您写10n+2，则会选择第2个，第12个，第22个，第32个等等。

因此，您需要10个不同选择器的规则，从10n+1，10n+2到10n+10开始，其中包含您要应用的不同设置。

以下是一个示例代码：http://codepen.io/anon/pen/grVvEo