css - 如何选择第 1、第 4、第 7 个元素等？

Question

我怎么能选择第 1、第 4、第 7 个元素等等？！还有如何选择第3，第6，第9等？

模式是选择和元素，然后留下两个并选择第三个。我知道我应该使用:nth-child，但我不知道具体如何。

Answer 1

要设置第一个、第四个、第七个（等等）元素的样式，最简单的方法是使用 CSS，使用以下内容（我假设您正在使用li元素，但显然要适应您的用例）：

ul {
    counter-reset: lis;
}

li::after {
    counter-increment: lis;
    content: counter(lis, decimal);
}

li:nth-child(3n+1) {
    background-color: #f90;
}

JS 小提琴演示。

参考：

• CSS 选择器。
• :nth-child().

Answer 2

我认为，这比公认的答案容易：

li:nth-child(3n - 2) {
    padding-left: 0; // etc
}