如何2列交替div背景？

Question

大家好，Stackoverflow

我一直在环顾四周，似乎无法找到答案，我正在寻找如何正确的交替2列div背景色，如下所示：

＆amp;：奇数和＆amp ;:偶数选择器似乎不适合我，所以显然它必须是＆amp;：nth-​​child（）的东西，但我的逻辑技能只是不适用于我...有没有类似的经历，也许可以帮助我？ :(图像中的数字表示div标签出现的顺序......

Answer 1

使用

1. :nth-child(4n+2) - 2,6,10,14 ......

2. :nth-child(4n+3) - 3,7,11,15 ......

.wrap{    
    width: 100px;
    font-size: 0;    
}
.wrap > div{
    font-size: 30px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    display: inline-block;
    vertical-align: top;  
    background: #fff;   
}
.wrap > div:nth-child(4n+2),
.wrap > div:nth-child(4n+3){    
    background: #F66C9B;
}

<div class="wrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</div>

Answer 2

您可以使用以下css。

.row:nth-child(4n-1),
.row:nth-child(4n+2)
{
    background: #e0e0e0;
}

JSfiddle

Answer 3

直线前进nth-child在这里不起作用。此外，您还需要应用一些数学来实现这种结果。

我在这里应用的逻辑基本上是使用数字4的倍数来选择4和8，然后是4n+1选择下一个元素。

这是CSS：

.row:nth-child(4n),
.row:nth-child(4n+1)
{
    background: white;
}

<强> FIDDLE