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

Styling every 3rd item of a list using CSS?

提问by Gezzamondo

Is it possible for me to style every 3rd list item?

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

Currently in my 960pxwide div I have list of boxes which are floated left and are displayed in a 3x3 grid view. They also have a margin-right of 30px, but because the 3rd 6th and 9th list item has this margin it makes them jump down a row making the grid display wrongly

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

How easy is to make the 3rd 6th and 9th not have the margin-right without having to give them a different class, or is that the only way to do it?

让第 3、6 和 9 没有边距权而不必给他们一个不同的班级是多么容易，或者这是唯一的方法吗？

回答by dsgriffin

Yes, you can use what's known as :nth-childselectors.

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

In this case you would use:

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

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

:nth-child(3n):

:nth-child(3n):

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

:nth-child()is compatible in Chrome, Firefox, and IE9+.

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

For a work around to use :nth-child()amongst other pseudo-classes/attribute selectors in IE6 through to IE8, see this link.

有关:nth-child()在 IE6 到 IE8 中的其他伪类/属性选择器中使用的解决方法，请参阅此链接。

回答by Sirko

You can use the :nth-childselector for that

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

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

回答by Zoltan Toth

Try this

尝试这个

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

DEMO

演示

nth-childbrowser support

nth-child浏览器支持

回答by hienbt88

:nth-childis the answer you are looking for.

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