nth-child CSS - 匹配第 2、第 5、第 8、... 元素 [重复]

【问题标题】：nth-child CSS - matching 2nd, 5th, 8th, ... elements [duplicate]nth-child CSS - 匹配第 2、第 5、第 8、... 元素 [重复]
【发布时间】：2011-10-05 05:59:07
【问题描述】：

我有一个 HTML 列表，在 CSS 的帮助下，我将其排列成 3 列的行块。

所以，如果列表有 6 个元素，它将是 2 行 x 3 列、9 个元素 - 3 x 3、12 个元素 - 4 x 3 等等。

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

提前致谢！

【问题讨论】：

标签： css css-selectors

【解决方案1】：

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

将此作为参考https://css-tricks.com/useful-nth-child-recipies/

【讨论】：

【解决方案2】：

如果我正确理解您的问题，:nth-child(3n+2) 就是您想要的。（参见例如this JSfiddle）

【讨论】：

【解决方案3】：

这应该可行：

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

基本上，3n 表示“每三分之一”，而+2 表示“从第二个开始”。

在此处阅读更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

【讨论】：

哈！我弄错了数字！你得到积分，因为你是最快的回来。塔！