如何选择第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().