如何用CSS按数字序列定位元素并循环设置样式？

完全不需要额外的HTML类或者JavaScript，咱们用CSS的**:nth-child()**选择器就能轻松搞定这种循环样式的需求。

实现代码： #

<ul>
  <li>Child 1</li>
  <li>Child 2</li>
  <li>Child 3</li>
  <li>Child 4</li>
  <li>Child 5</li>
  <li>Child 6</li>
  <li>Child 7</li>
  <li>Child 8</li>
  <li>Child 9</li>
  <li>Child 10</li>
</ul>

/* 每6个元素为一组，前3个设为红色 */
ul li:nth-child(6n + 1),
ul li:nth-child(6n + 2),
ul li:nth-child(6n + 3) {
  color: red;
}

/* 每6个元素为一组，后3个设为蓝色 */
ul li:nth-child(6n + 4),
ul li:nth-child(6n + 5),
ul li:nth-child(6n + 6) {
  color: blue;
}

原理说明： #

:nth-child(an + b) 是CSS的结构化伪类选择器，其中：

• a 代表循环的周期（这里是6，因为3红+3蓝=6个元素为一个循环单元）
• b 代表周期内的位置索引（从1开始计数）

所以：

• 6n + 1 会选中第1、7、13...个元素
• 6n + 2 选中第2、8、14...个元素
• 以此类推，这样就能完美实现“3红3蓝”循环的样式效果。

测试你给出的列表，结果就是：Child1-3红色，Child4-6蓝色，Child7-9红色，Child10蓝色，完全符合需求~

内容的提问来源于stack exchange，提问作者Richa