首页 文章

使用CSS为列表中的每个第3项设置样式？ [重复]

提问于
浏览 次
65

这个问题在这里已有答案：

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

目前在我的 960px 宽div中，我有左侧浮动的框列表，并以3x3网格视图显示 . 它们还有 30px 的边距权限，但是由于第3个第6个和第9个列表项具有此边距，因此它们会使它们向下跳跃，从而使网格显示错误

如果没有给他们一个不同的课程，那么第3和第6个没有边际权利是多么容易，或者这是唯一的方法吗？

html5 css3

4 回答

  • 8

    是的，您可以使用所谓的: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，see this link中的其他伪类/属性选择器中使用 :nth-child() 的解决方法 .

    回复于
  • 4

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

    li:nth-child(3n) {
 /* your rules here */
}
    回复于
  • 1

    试试这个

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

    DEMO

    nth-child browser support

    回复于
  • 162

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

    回复于

相关问题