Question

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

感谢您的帮助！

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

Answer 2

也许这可以帮到你：

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

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

使用nth-child选择连续的组？

2 个答案: