html - 使用 CSS 为列表的每个第三项设置样式？

Question

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

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

让 3rd 6th 和 9th 没有margin-right 而不必给他们一个不同的类是多么容易，或者这是唯一的方法吗？

score 244 · Accepted Answer

是的，您可以使用所谓的: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 中使用其他伪类/属性选择器的解决方法，请参阅此链接。

score 9 · Accepted Answer

9

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

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

于 2012-12-03T21:07:40.923 回答

score 4 · Accepted Answer

4

试试这个

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

于 2012-12-03T21:07:33.420 回答

score 1 · Accepted Answer

1

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

于 2012-12-04T04:12:04.823 回答

4 回答 4