问题描述
我有一个 divs 列表,它与一个类连续出现 4 个,我想创建一个棋盘背景样式,意思是:
I have a list of divs that appear 4 in a row with a class and I would like to create a checkerboard background style, meaning:
- 为奇数和偶数 div 应用不同的背景颜色
- 将每行的奇偶切换为奇偶
我试过了
.boxwrapper:nth-child(2n-1), .boxwrapper:nth-child(2n) { background:#ff0000; } .boxwrapper:nth-child(4n-2), .boxwrapper:nth-child(4n-3) { background:#0000ff; }
它适用于奇偶 div,但不能让它每 4 个项目切换一次.我正在为 4n-1、4n+1 的事情头疼,如果我能做到这一点,瞧!
and it works fine for odd-even divs but cant get it to switch every 4 items. I'm headaching over the 4n-1, 4n+1 stuff, if I could get that right voila!
结果应该是这样的:
推荐答案
Demo
http://jsfiddle.net/mykhA/1/
<div class="container"> <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> </div>?
CSS
.container { width: 100px; height: 100px; } .line { width: 100px; height: 25px; } .box { width: 25px; height: 25px; float: left; } .box:nth-child(8n+2) { background-color: red; } .box:nth-child(8n+4) { background-color: red; } .box:nth-child(8n+5) { background-color: red; } .box:nth-child(8n+7) { background-color: red; } .box:nth-child(8n+1) { background-color: blue; } .box:nth-child(8n+3) { background-color: blue; } .box:nth-child(8n+6) { background-color: blue; } .box:nth-child(8n) { background-color: blue; } ?