如何定位period class并为每个该类元素设置不同背景色？

嘿，别发愁啦！这个问题其实不难解决，定位.period类元素并给每个设置不同背景色，有两种常用的实现方式，我给你详细说说：

如果你的.period元素数量是固定的，用纯CSS就可以搞定，核心是用**:nth-of-type伪类**来逐个选中元素：

首先，先给所有.period元素设置基础样式，再分别给每个元素指定不同背景色：

/* 统一设置所有period元素的基础样式 */
li.period {
  padding: 6px 12px;
  margin: 3px 0;
  list-style: none; /* 如果不需要默认列表圆点可以加上 */
}

/* 给第1个period元素设置背景色 */
li.period:nth-of-type(1) {
  background-color: #ff7f7f;
}

/* 第2个 */
li.period:nth-of-type(2) {
  background-color: #7fff7f;
}

/* 第3个 */
li.period:nth-of-type(3) {
  background-color: #7f7fff;
}

/* 依次给剩下的元素设置不同颜色 */
li.period:nth-of-type(4) {
  background-color: #ffbf7f;
}
li.period:nth-of-type(5) {
  background-color: #7fbfff;
}
li.period:nth-of-type(6) {
  background-color: #ff7fbf;
}
li.period:nth-of-type(7) {
  background-color: #bfff7f;
}
li.period:nth-of-type(8) {
  background-color: #7fffbf;
}

这种方法的好处是不用写JavaScript，样式直接由CSS控制，适合元素数量固定的场景。

如果.period元素数量不确定，或者你想更灵活地控制颜色（比如随机生成颜色），用JavaScript会更合适：

步骤很简单：先选中所有.period元素，然后遍历它们并逐个设置背景色：

// 1. 获取页面中所有带period类的li元素
const periodElements = document.querySelectorAll('li.period');

// 2. 准备一组你想要的背景色（数量可以根据需要调整）
const colorList = [
  '#ff7f7f', '#7fff7f', '#7f7fff', '#ffbf7f',
  '#7fbfff', '#ff7fbf', '#bfff7f', '#7fffbf'
];

// 3. 遍历每个元素，设置对应的背景色
periodElements.forEach((element, index) => {
  // 用取模运算确保即使元素数量超过颜色数组长度，也能循环取色
  element.style.backgroundColor = colorList[index % colorList.length];
  // 同样可以设置基础样式
  element.style.padding = '6px 12px';
  element.style.margin = '3px 0';
  element.style.listStyle = 'none';
});

注意：要确保JavaScript在DOM加载完成后执行，你可以把这段代码放在</body>标签的末尾，或者用DOMContentLoaded事件包裹：

document.addEventListener('DOMContentLoaded', () => {
  // 上面的代码放在这里
});

两种方法都能实现你的需求，你可以根据自己的场景选择～

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