元素1,6,7,10,13等的n-child

Question

我正在尝试使用nth-child来定位1,6,7,10,13等。和一些风格。我是单独定位它们但这不会起作用，因为内容会自动生成。

我有一个大的div，然后是两个小div，一个在另一个之上，然后下一行是相反的2小和一个大，这是继续添加内容。

实现这一目标的最佳选择是什么？

以下是我在分钟时使用的CSS：

div:nth-child(1),div:nth-child(6),div:nth-child(7),
div:nth-child(10),div:nth-child(13){
background:#000;
}

Answer 1

  

我有一个大的div，然后是两个小div，一个在另一个之上，然后下一行是相反的2小和一个大，这是继续添加内容。

所以同样的情况每6个项目重复一次。使用:nth-child(an+b)，您现在知道a=6 为每组6：1和6（然后7和12（不是10），13和18等）选择2个元素。要选择第一个，b=1就可以了。要选择第6个，b=0或b=6都可以

这导致：

li:nth-child(6n+1),
li:nth-child(6n) {
  /* sth different */
}

Codepen： http://codepen.io/anon/pen/cypAn

Answer 2

如果您只想使用CSS，则应使用 nth-child 。见article here。如果你是一个视觉学习者，底部有一个漂亮的桌子可以提供帮助。