CSS3 nth-child() 每 5 个元素重复范围

Question

是否可以每 5 个元素选择一个范围的元素？我期望的是:

<ul>
   <li>Test</li>
   <li>Test</li> //this
   <li>Test</li> //this
   <li>Test</li> //this
   <li>Test</li>
   <li>Test</li>
   <li>Test</li> //this
   <li>Test</li> //this
   <li>Test</li> //this
   <li>Test</li>
</ul>

从 2 到 4，从 7 到 9，等等

提前致谢!

Answer 1

由于您的范围具有 [5 n - 3, 5 n - 2, 5 n - 1] 的形式(其中 n ≥ 1)，使用如下代码:

li:nth-child(5n - 3), li:nth-child(5n - 2), li:nth-child(5n - 1) {
  color: red;
}

<ul>
   <li>Test</li>
   <li>Test</li>
   <li>Test</li>
   <li>Test</li>
   <li>Test</li>
   <li>Test</li>
   <li>Test</li>
   <li>Test</li>
   <li>Test</li>
   <li>Test</li>
</ul>