html - 使用 CSS 为列表的每 3 个元素设置样式？

<分区>

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

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

让第 3、第 6 和第 9 没有边际权利而不给他们一个不同的类(class)有多容易，或者这是唯一的方法吗？

最佳答案

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

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

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

:第n个 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 .

关于html - 使用 CSS 为列表的每 3 个元素设置样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13691699/