多Div奇偶背景色设置异常：前两个不计入计数，目标Div始终显示偶数样式

嘿，我明白你的问题了！你想让前两个div不参与奇偶计数，从第四个div开始把它当作奇数项来设置背景色，但现在它总是显示偶数样式——这大概率是因为你用的奇偶选择器是基于整个父元素里的位置计算的，而不是跳过前两个之后重新计数对吧？

问题根源 #

举个例子：第四个div在整个父元素的子序列里是nth-child(4)，属于偶数位。如果你直接写div:nth-child(n+4):nth-child(odd)，这个选择器会选中第五、第七这些原本的奇数位div，而不是你想要的第四、第六个。这就导致你期望的“奇数项”根本没被选中，自然只会看到偶数样式。

解决方案 #

这里提供两种写法，你可以根据浏览器兼容性需求选择：

方案一：现代浏览器推荐（CSS Selectors Level 4）

这个语法允许你先筛选出目标元素集，再在这个子集内做奇偶计数，逻辑更直观：

/* 从第四个div开始的子集里，奇数项（原第4、6、8...个div） */
div:nth-child(odd of div:nth-child(n+4)) {
  background-color: #f0f0f0;
}

/* 从第四个div开始的子集里，偶数项（原第5、7、9...个div） */
div:nth-child(even of div:nth-child(n+4)) {
  background-color: #e0e0e0;
}

注：该语法支持Chrome、Firefox、Edge等现代浏览器，旧版IE不支持。

方案二：兼容性优先写法

通过直接计算偏移后的位置，适配更多旧浏览器：

/* 前两个div保持默认样式，无需额外设置 */

/* 目标奇数项：原第4、6、8...个div */
div:nth-child(2n + 4) {
  background-color: #f0f0f0;
}

/* 目标偶数项：原第5、7、9...个div */
div:nth-child(2n + 5) {
  background-color: #e0e0e0;
}

测试示例HTML #

你可以用这段代码验证效果：

<div>第一个div（不计入计数）</div>
<div>第二个div（不计入计数）</div>
<div>第三个div（不计入计数）</div>
<div>第四个div（应显示奇数样式）</div>
<div>第五个div（应显示偶数样式）</div>
<div>第六个div（应显示奇数样式）</div>
<div>第七个div（应显示偶数样式）</div>

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