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)

CSS nth-child 1-6,7-12等

3 个答案: