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

Question

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

目前在我的960px广泛div中,我有左侧浮动的框列表,并以3x3网格视图显示.它们也有一个右边距30px,但由于第3个第6个和第9个列表项具有此边距,因此它们会使它们向下跳跃,使得网格显示错误

如果没有给他们一个不同的课程,那么第3和第6个没有边际权利是多么容易,或者这是唯一的方法吗？

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 +兼容.

要:nth-child()在IE6到IE8中使用其他伪类/属性选择器,请参阅此链接.

Answer 2

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

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