問題描述

我有一個 divs 列表，它與一個類連續(xù)出現(xiàn) 4 個，我想創(chuàng)建一個棋盤背景樣式，意思是:

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:

• 為奇數(shù)和偶數(shù) div
應(yīng)用不同的背景顏色
• 將每行的奇偶切換為奇偶

我試過了

.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!

結(jié)果應(yīng)該是這樣的:

推薦答案

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;
}
?

這篇關(guān)于CSS nth-child 應(yīng)用奇偶規(guī)則，但每 4 項切換一次的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！