創建先進的CSS第n個孩子選擇

enter image description here

我目前針對藍色的方式是這樣的：

#recent ul li:nth-child(3), 
#recent ul li:nth-child(4), 
#recent ul li:nth-child(9) { 
    width: 49.79166666666667%; 
    margin: 0 0 0 0.41666666666667%; 
}

在CSS中有一種方法可以使選擇器將該模式考慮在內，因爲如果我想添加60個圖塊？所以我不必保持指定確切的值？我知道如何選擇每個第二或第三等，但不是模式改變的地方。

感謝您的任何援助

來源

2013-11-28 Phill

你可以插入每一行到一個容器元素？像div？ – udidu

這是最後的手段 - 我想知道它是否可以純粹在CSS中完成 – Phill

這些'width'和'margin'值看起來非常瘋狂，並且可能會導致由四捨五入錯誤導致的跨瀏覽器問題......什麼你想達到什麼目的？我認爲如果你使用了'box-sizing：border-box'，你可以設置'width：50％'。 – Spudley

從您的圖表，它看起來像在每一組的6項裏，你要定位的第三和第四....試試這個：

#recent ul li:nth-child(6n+3), 
#recent ul li:nth-child(6n+4)

dev.mozilla link

jsfiddle example

來源

2013-11-28 10:50:40

這需要第4次和第5次，不是嗎？ :) –

是的你是對的，輕微的錯字。我還添加了一個jsfiddle。另外值得注意的是在IE8或更低版本中不支持 –

如果問題是詢問如何使用'：nth-child（）'創建高級選擇器，並且部分工作的演示已經就位，那麼IE8支持可能不是大不了。另外，這些應該是單個冒號。 – BoltClock

創建先進的CSS第n個孩子選擇

回答

相關問題