使用nth-child循环遍历项目,但忽略第一项

Question

使用CSS,是否可以使用nth-child重复每3个项目,但忽略列表中的第一个项目？

例如,我需要列表中的第一个项目没有特定的颜色¹然后项目循环通过红色,绿色和蓝色.

Transparent | Red | Green | Blue | Red | Green | Blue | Red | Green | Blue

如果不必忽略第一项,那将只是以下......

li:nth-child(3n+1) { color:red; }
li:nth-child(3n+2) { color:green; }
li:nth-child(3n+3) { color:blue; }

但我忽略了第一项,我无法想出一个只有CSS的方法

(¹ - 我来自英国)

Answer 1

你很亲密 尝试:

li:nth-child(3n+2) {
  color: red;
}
li:nth-child(3n+3) {
  color: green;
}
li:nth-child(3n+4) {
  color: blue;
}

li:nth-child(3n+2) {
  color: red;
}

li:nth-child(3n+3) {
  color: green;
}

li:nth-child(3n+4) {
  color: blue;
}

<ul>
  <li>Transparent</li>
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
</ul>