CSS第n个子元素1-6、7-12等

Question

我试图按以下方式设置子元素的样式

1、7、13等

2、8、14等

3、9、15等

4、10、16等

5、11、17等

6、12、18等

我可以使用什么 nth-child 语法来实现这个目标？

- Sean Dooley

Answer 1

您可以使用:nth-child(6n+1)、:nth-child(6n+2)、:nth-child(6n+3)、:nth-child(6n+4)等等。参考文献：http://w3.org/TR/css3-selectors/#nth-child-pseudo，http://w3.org/TR/css3-selectors/#selectors（感谢 @NayukiMinase）。另外，这里有一个非常好的示例：Useful :nth-child Recipes - CSS-Tricks。

- Madara's Ghost

---

参考资料：http://www.w3.org/TR/css3-selectors/#nth-child-pseudo，http://www.w3.org/TR/css3-selectors/#selectors - Nayuki

Answer 2

在这里阅读有关nth-child如何工作的解释。

您可以使用6n + x，其中必须为x插入适当的数字。

- flying sheep

Answer 3

使用这个简单的公式：nd + a。

here a : first element index
     n : n
     d : difference

Example: 1,7,13
here a : 1
     n : n
     d : 6
    So the pseudo selector will be :nth-child(6n + 1)

- Ijas Ameenudeen