<分区>
大家好 Stackoverflow
我一直在四处寻找，似乎无法找到我一直在寻找的答案，如您在此处看到的那样，如何正确交替使用 2 列 div 背景颜色:
&:odd 和 &:even 选择器似乎对我不起作用，所以显然它必须是 &:nth-child() 之类的东西，但我的逻辑能力对我不起作用..任何人都有类似的经历也许可以帮助我？ :( 图片中的数字表示 div 标 checkout 现的顺序...
<分区>
大家好 Stackoverflow
我一直在四处寻找，似乎无法找到我一直在寻找的答案，如您在此处看到的那样，如何正确交替使用 2 列 div 背景颜色:
&:odd 和 &:even 选择器似乎对我不起作用，所以显然它必须是 &:nth-child() 之类的东西，但我的逻辑能力对我不起作用..任何人都有类似的经历也许可以帮助我？ :( 图片中的数字表示 div 标 checkout 现的顺序...
最佳答案
使用
:nth-child(4n+2) - 2, 6, 10, 14 ...
: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>关于html - 如何2列交替div背景？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31184643/