使用CSS为列表中的每个第3项设置样式？

Question

我可以为每个第3个列表项设置样式吗？

目前在我的960px广告div中，我有左侧浮动的框列表，并以3x3网格视图显示。它们还有30px的边距权限，但由于第3个第6个和第9个列表项具有此边距，因此它们会使它们向下跳跃，从而使网格显示错误

第3个6号和第9号没有必须给他们一个不同的课程，或者这是唯一的方法，这是多么容易？

Answer 1

是的，您可以使用所谓的:nth-child选择器。

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

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

<强>：第n个孩子（3N）：

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

:nth-child()与Chrome，Firefox和IE9 +兼容。

要在IE6到IE8中使用:nth-child()以及其他伪类/属性选择器，see this link。

Answer 2

您可以使用:nth-child选择器

li:nth-child(3n) {
 /* your rules here */
}

Answer 3

试试这个

box:nth-child(3n) {  
     ...
}

DEMO

nth-child browser support

Answer 4

:nth-child是您正在寻找的答案。