css3第n個孩子問題

我正在設計一個960px寬的無序列表佈局。每個列表項目寬度爲240px，因此4個列表項目在一行中水平放置。我在頁面上大約20行....css3第n個孩子問題

我希望所有其他列表項具有#ececec的背景，所以我的CSS是：

ul li:nth-child(2n+2){ 
    background-color:#ececec; 
}

這工作。唯一的問題是，因爲一行中有4個項目（偶數＃），所以下一行將是相同的，因此在一行中的每個第一和第三個列表項目上呈現背景顏色。這不是我想要達到的效果。我想要背景顏色交替，創建一個類似網格的效果。什麼是正確的CSS這樣做（認爲棋盤）。謝謝！

來源

2010-04-20 JCHASE11

如果你想有一個棋盤，然後使用：

ul li:nth-child(8n+1), ul li:nth-child(8n+3), ul li:nth-child(8n+6), ul li:nth-child(8n+8) { 
    background-color:#ececec; 
}

圖案每兩行，而你的情況是每8個元素重複，所以你在選擇需要8N。而在那八個中，你想要0,2,5和7有替代顏色。

編輯：我想這HTML，並得到了在Firefox 3.5.9棋盤：

<html> 
<head> 
<style> 
#container { 
    width: 960px; 
    border: 1px solid black; 
} 
span { 
    border: 1px solid gray; 
    display: block; 
    width: 180px; 
    float: left; 
    padding: 10px; 
    margin: 10px; 
    background: blue; 
} 
span:nth-child(8n+1), span:nth-child(8n+3), span:nth-child(8n+6), span:nth-child(8n+8) { 
    background: red; 
} 
</style> 
<body> 
<div id='container'> 
    <span>One</span> 
    <span>Two</span> 
    <span>Three</span> 
    <span>Four</span> 
    <span>Five</span> 
    <span>Six</span> 
    <span>Seven</span> 
    <span>Eight</span> 
    <span>Nine</span> 
    <span>Ten</span> 
    <span>Eleven</span> 
    <span>Twelve</span> 
    <span>Thirteen</span> 
    <span>Fourteen</span> 
    <span>Fifteen</span> 
    <span>Sixteen</span> 
    <span>Seventeen</span> 
    <span>Eighteen</span> 
</div>

來源

2010-04-20 21:27:43

反直覺，'第n-child'是從1開始的。 – bobince 2010-04-20 21:31:47

似乎無法得到這個工作。仍然加載完全相同。要多給它幾次嘗試 – JCHASE11 2010-04-20 21:44:53

我已經嘗試了兩種建議，每種可能的組合都有，並且它仍然沒有工作......任何想法？ – JCHASE11 2010-04-20 21:47:39

css3第n個孩子問題

回答

相關問題