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/:nth-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)就是你想要的。 （参见例如this JSfiddle）