使用 nth-child 选择连续组？答案

【问题标题】：Select consecutive groups using nth-child?使用 nth-child 选择连续组？
【发布时间】：2011-12-24 22:59:58
【问题描述】：

是否可以使用 nth-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;
}

感谢您的帮助！

【问题讨论】：

但是IE8也不支持:nth-child()...
我会在我的标记中牺牲一点语义，并将每一列拆分成自己的 ul/ol。
你可以展示一个 jsfiddle 以便更好地理解你想要什么
这闻起来像是一张可以接受的桌子用途......

标签： css css-selectors

【解决方案1】：

试试这个

#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 */

【讨论】：

+1 因为这是正确的，但除非 OP 找到一种方法让它在 IE8 中工作......
我将此标记为正确。我将它与code.google.com/p/ie7-js 结合使用，它应该可以在 IE8 中使用。
另外：如果您需要一致的特异性值，#location-menu li:nth-child(n+0) 可以简化为 #location-menu li 或 #location-menu li:nth-child(n)。

【解决方案2】：

也许这可以帮助你：

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

但它会按行显示项目，而不是按列...

【讨论】：