2

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

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

例如

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

我的猜测是需要一点 jQuery，但是到目前为止，我从 search/jsfiddles 的尝试非常糟糕。

希望这很容易理解。

4

3 回答 3

4

如果我理解正确：

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/

于 2013-07-04T21:39:56.537 回答
1

CSS解决方案：

对于每个 0 <= k< 23，以这种方式应用第 k 个项目的样式：

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

jQuery解决方案：

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

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

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

看看这个工作的 jsFiddle

于 2013-07-04T21:32:38.450 回答
1

你的问题实际上不是很清楚，至少对我来说是这样。

实际的

我认为这就是解决问题的方法：

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。

于 2013-07-04T21:38:59.387 回答