Question

我创建了一个网格模式，在我的css文件中使用:nth-child(1)，:nth-child(2)等使用了23种独特的显示和位置样式。

目的是让模式重复回到第24个元素的第一个子样式，我看过像:nth-child(2n+1):这样的例子，但模式不够重复，所以我感觉从1到23的循环会最好。

e.g。

div:nth-child(1)
div:nth-child(2)
---
div:nth-child(23)
loop

我的猜测是需要一个jQuery的地方，但是到目前为止我搜索/ jsfiddles的尝试都非常糟糕。

希望这很容易理解。

Answer 1

如果我理解正确：

div:nth-child(n+23){ ... }    
div:nth-child(n+47){ ... }    
div:nth-child(n+71){ ... }
...

http://jsfiddle.net/dUXrC/

但是如果你只是想在每23次DIVS之后重复相同的风格：

div:nth-child(23n+1){ ... }    
div:nth-child(23n+2){ ... }   
div:nth-child(23n+3){ ... }    
...

http://jsfiddle.net/dUXrC/1/

Answer 2

CSS解决方案：

对于每个0＆lt; = k＆lt; 23，以这种方式应用第k项的风格：

div:nth-child(23n+k){...}

jQuery解决方案：

您可以创建23个不同的类：.div1，.div2 ... .div23 - 每个类都有所需的CSS规则。

然后使用以下jQuery代码将正确的类分配给相关的div（使用modulu）：

$(function(){
    $('div').each(function(index,value){
        $(value).addClass('div'+((index+1) % 23));
    }); 
});

查看此working jsFiddle

Answer 3

你的问题实际上并不是很清楚，至少对我而言。

实际

我认为这是钉在它上面的东西：

div:nth-child(24n-23) /* 1 */
{
    background-color: red;
}

div:nth-child(24n-22) /* 2 */
{
    background-color: green;
}

/* --- */

div:nth-child(24n-16) /* 8 */
{
    background-color: cyan;
}

小提琴：http://jsfiddle.net/czWkE/2/

我们在这里做的是，选择每个第24个元素，然后在它之前取一些元素。

上：

~~我想出了这个：http://jsfiddle.net/czWkE，然后笑到它与div选择器相同。~~

如果您想以不同的方式着色每个第1，第2，第3 ......第24，您可以：http://jsfiddle.net/czWkE/1/

div:nth-child(1n)
{
    background-color: red;
}

div:nth-child(2n)
{
    background-color: green;
}

/* --- */

div:nth-child(24n)
{
    background-color: cyan;
}

基本上，您将n添加到子号码，并且每nth重复一次。

是否有可能循环出一种模式：n-child-styles？

3 个答案:

实际

上：