nth-child CSS - 匹配第2,第5,第8 ......元素

Question

我有一个HTML列表,在CSS的帮助下,我正在排列3列的行.

因此,如果列表有6个元素,它将是2行x 3列,9个元素 - 3 x 3,12个元素 - 4 x 3等等.

如何使用CSS nth-child选择器选择每行的中间元素？即,第2,第5,第8 ......元素.

提前致谢!

Answer 1

这应该工作:

:nth-child(3n+2) {
    // your css rules here
}

基本上,3n"每三分之一"的+2意思是"从第二个开始".

在这里阅读更多内容:https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child

Answer 2

li:nth-child(3n+2) {
    //whatever you have to do
}

请参阅此参考https://css-tricks.com/useful-nth-child-recipies/

Answer 3

如果我理解你的问题,:nth-child(3n+2)那就是你想要的.(参见例如这个JSfiddle)