CSS nth-child 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语法来实现这个目的？

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

Answer 2

阅读nth-child如何工作here的解释。

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

Answer 3

使用这个简单的等式：和+ 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)