使用：第n个孩子循环通过儿童李元素

好吧，我有一个情况，我有一组颜色，比如说10。使用：第n个孩子循环通过儿童李元素

现在我想通过这个子元素的颜色列表，并给他们从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或别的东西，要做到这一点，如萨斯功能？

来源

2016-05-23 Brett

您可以添加有问题的HTML结构，请..或当前片段的代码.. –

@Ninooppgeorge它可以是任何东西，例如用21个孩子列表:) – Brett

@Brett请在你的问题中添加一个最小的，完整的，可验证的例子（MCVE）。欲了解更多信息，请查看[帮助]。 – TylerH

编辑/扩展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

来源

2016-05-23 17:16:30 Johannes

你能解释一下它的工作原理吗？ – Brett

@Brett请注意我的扩展答案 – Johannes

非常感谢您的解释！ – Brett

使用：第n个孩子循环通过儿童李元素

回答

相关问题