是否可以使用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;
}
感谢您的帮助!
最佳答案
试试这个
#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 */
关于css - 使用 nth-child 选择连续的组？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8059449/