使用CSS对列表的每个第3项进行样式化？ [英] Styling every 3rd item of a list using CSS?

问题描述

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

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

目前在我的 960px 具有左侧浮动并以3×3网格视图显示的框的列表。它们还有一个边距右边 30px ，但因为第3个第6和第9列表项有这个边距，它使它们向下跳一排，使网格显示错误

Currently in my 960px wide 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

让第三个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?

推荐答案

是的，可以使用：nth-​​child（）

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

In this case you would use:

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

：nth-​​child（3n）： / p>

: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() is compatible in Chrome, Firefox, and IE9+.

在IE6到IE8中的其他伪类/属性选择器之中，：nth-​​child（）查看此链接。

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

这篇关于使用CSS对列表的每个第3项进行样式化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！