使用CSS設計列表的每個第三項？

當前在我的960px wide div我有左側浮動框顯示在3x3網格視圖中的列表。他們也有30px一個保證金的權利，但由於第三第6和第9列表項有這個利潤率這讓他們跳下一行將網格顯示錯誤

多麼容易使第3第6和第9沒有邊際權利，而不必給他們一個不同的階級，或者是唯一的方法來做到這一點？

2012-12-03 Gezzamondo

爲了更好地理解這個問題，你可以檢查此tutplus視頻 https://www.youtube.com/watch?v=nuCoBOdY2Qk 感謝 –

您正在尋找'李：第n個孩子（3N + 3）'其實，因爲你想排除索引0.我很驚訝，五年半後沒有提供正確的答案。這裏是一個[** JSFiddle **]（https://jsfiddle.net/WebWanderer/sjo3uu1z/6/） – WebWanderer

130

是的，你可以使用所謂的:nth-child選擇器。

在這種情況下，你可以使用：

li:nth-child(3n) { 
// Styling for every third element here. 
}

：第n個孩子（3N）：

3(0) = 0 
3(1) = 3 
3(2) = 6 
3(3) = 9 
3(4) = 12

:nth-child()是在Chrome，火狐和IE9 +兼容。

要解決在IE6到0123之間使用:nth-child()以及其他僞類/屬性選擇器的問題see this link。

2012-12-03 21:07:13 lifetimes

這個選項在IE中工作 – Gezzamondo

@Gezzamondo根據[MDN]（https：//developer.mozilla。 org/en-US/docs/CSS /：nth-child），它由IE9 +支持。 – Sirko

它應該在IE9 +中工作。如果你是在IE8和之前的解決辦法之後，請檢查這個鏈接 - http://selectivizr.com/ – lifetimes

試試這個

box:nth-child(3n) { 
    ... 
}

2012-12-03 21:07:33

在這裏，'3n'就夠了。 – j08691

@ j08691謝謝，這是正確 –

+ int（Pi/3）的瀏覽器支持圖表！ – vaxquis

可以使用:nth-child選擇爲

li:nth-child(3n) { 
/* your rules here */ 
}

2012-12-03 21:07:40 Sirko

:nth-child是你正在尋找的答案。

2012-12-04 04:12:04 hienbt88

回答