使用 CSS 样式化列表中的每个第三项？

我是否可以设计每个第三列的项目？

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

如果不给第三个第六和第九个学生一个不同的班级，让他们没有差距是多么容易的事情，或者这是唯一的办法？

203484 次浏览

小开

最佳答案

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

In this case you would use:

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

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

小开

Try this

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

小开

You can use the :nth-child selector for that

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

小开

:nth-child is the answer you are looking for.