如何选择第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 Fiddle demo

参考文献：

• CSS selectors。
• :nth-child()。

Answer 2

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

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