如何忽略中间DIV标签为指定类DIV设置交替背景色？

嘿，这个问题我之前也踩过坑！当.select元素中间夹杂着.ignore这类无关元素时，用.select:nth-child(odd)肯定不管用——因为nth-child是按所有同级元素的位置来判断奇偶的，它根本不会过滤类名。比如你的结构里，第二个.select是整个父元素的第3个子元素，第三个是第5个，全是奇数位置，自然没法实现交替色。

下面给你两种靠谱的解决办法：

方案一：用CSS新语法直接筛选（现代浏览器友好） #

CSS Selectors Level 4新增了nth-child(An+B of <selector>)的语法，它会先把符合.select的元素筛选出来，再对这些元素按顺序计算奇偶，完美跳过中间的.ignore。

代码写起来很简单：

/* 给奇数位置的.select加浅灰背景 */
.select:nth-child(odd of .select) {
  background-color: #f0f0f0;
}

/* 偶数位置的用白色 */
.select:nth-child(even of .select) {
  background-color: #ffffff;
}

这个方法纯CSS搞定，不用改HTML结构，Chrome 77+、Firefox 78+、Safari 14.1+都支持，适合现代项目。

方案二：JS辅助加类（兼容旧浏览器） #

如果需要兼容IE这类老浏览器，就用JS手动给.select元素标记奇偶类，再用CSS设置样式：

先写JS逻辑： #

// 获取所有.select元素
const selectBoxes = document.querySelectorAll('.select');
// 遍历给每个元素加对应类
selectBoxes.forEach((box, index) => {
  box.classList.add(index % 2 === 0 ? 'odd-select' : 'even-select');
});

再写CSS： #

.odd-select {
  background-color: #f0f0f0;
}
.even-select {
  background-color: #ffffff;
}

这种方法兼容性拉满，几乎所有浏览器都能跑，适合有旧兼容需求的场景。

内容的提问来源于stack exchange，提问作者Arun Selva Kumar