使用n-child選擇連續的組？

是否可以使用nth-child（）來選擇連續的元素？使用n-child選擇連續的組？

我有24個項目的有序列表。我想將它們分成4列。目前我是這樣做的：

#location-menu li:nth-child(1), 
#location-menu li:nth-child(2), 
#location-menu li:nth-child(3), 
#location-menu li:nth-child(4) { 
    margin-left: 0; 
} 
#location-menu li:nth-child(5), 
#location-menu li:nth-child(6), 
#location-menu li:nth-child(7), 
#location-menu li:nth-child(8) { 
    margin-left: 100px; 
}

正如你所看到的，它將失去第24項的控制。最好的做法是使用CSS3列來分割列表，但重要的是這個網站在IE8中工作。

我希望這樣的事情：

#location-menu li:nth-child(1-4) { 
    margin-left: 0; 
} 
#location-menu li:nth-child(5-8) { 
    margin-left: 0; 
}

感謝您的幫助！

來源

2011-11-09 Drew Baker

但IE8不支持'：nth-child（）'... – BoltClock

我會在我的標記中犧牲一點語義，並將每列分成它自己的ul/ol。 – BoltClock

可以顯示爲更好地瞭解的jsfiddle你想要什麼 – sandeep

試試這個

#location-menu li:nth-child(n+0) { margin-left: 0;  } 
#location-menu li:nth-child(n+5) { margin-left: 100px; } 
#location-menu li:nth-child(n+9) { margin-left: 200px; } 
#location-menu li:nth-child(n+13) { margin-left: 300px; } 
/* and so on */

來源

2011-11-09 02:15:27 lschin

+1因爲這是正確的，但除非OP找到一種方式來獲得它在IE8工作... – BoltClock

我將此標記爲正確。我與http://code.google.com/p/ie7-js/一起使用它，它應該在IE8中工作。 –

另外：'＃位置的菜單裏：第n個孩子（N + 0）'可以簡化爲'＃位置的菜單li'，或'＃位置的菜單裏：第n個孩子（N）'如果你需要保持一致特異性值。 – BoltClock

也許這可以幫助你：

#location-menu li:nth-child(4n+0){ 
    margin-left: 0; 
} 
#location-menu li:nth-child(4n+1){ 
    margin-left: 100px; 
} 
...

，但它會被列由行顯示的項目，不...

來源

2011-11-09 01:49:42 Binus

使用n-child選擇連續的組？

回答

相關問題