使用 CSS 为列表的每个第三项设置样式？ [复制]答案

【问题标题】：Styling every 3rd item of a list using CSS? [duplicate]使用 CSS 为列表的每个第三项设置样式？ [复制]
【发布时间】：2012-11-21 10:01:13
【问题描述】：

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

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

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

【问题讨论】：

标签： html css

【解决方案1】：

是的，您可以使用所谓的: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+。

关于在 IE6 到 IE8 中使用 :nth-child() 以及其他伪类/属性选择器的解决方法，see this link。

【讨论】：

这个选项在 IE 中是否有效
@Gezzamondo 根据MDN IE9+ 支持。
它应该可以在 IE9+ 中运行。如果您在解决 IE8 及之前的问题，请查看此链接 - selectivizr.com
我可以在这个 .work-grid:nth-child(3n) { width:300px; 上使用一个类吗？高度：300 像素；边距右：30px；边距底部：30px；背景颜色：#0C9;向左飘浮; }
我似乎无法让它工作。我的 li 有一类 .work-grid 这是否意味着不能使用 :nth-child() ？

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

试试这个

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

【讨论】：