html5 – 使用CSS对列表的每个第3项进行样式化？

参见英文答案 > Select every Nth element in CSS4个答案我可以为每个第三列表项目样式吗？

目前在我的960px宽div我有列表的框，左侧浮动，并显示在一个3×3网格视图。它们也有一个30像素的边距，但是因为第3个第6和第9列表项有这个边距，它使它们向下跳一排，使网格显示错误

如何容易使第3和第6个没有边距 – 没有给他们一个不同的类，或者是唯一的方法呢？

解决方法

是的，你可以使用所谓的：nth-​​child()选择器。

在这种情况下，您将使用：

li:nth-child(3n) {
// Styling for every third element here.
}

：nth-​​child(3n)：

3(0) = 0
3(1) = 3
3(2) = 6
3(3) = 9
3(4) = 12

：nth-​​child()在Chrome，Firefox和IE9中兼容。

对于一个工作使用：nth-​​child()在其他伪类/属性选择器在IE6到IE8，see this link。

原文地址：https://www.jb51.cc/html5/169943.html