使用:nth-child(odd/even)选择器修改背景色失效问题排查

问题出在哪？ #

你写的.icon-block:nth-child(odd/even)是在匹配每个.icon-block的父元素（即.main-block）中的奇偶位置子元素，但每个.main-block里只有一个.icon-block，所以所有.icon-block都是父元素的第1个（奇数）子元素，只会触发蓝色背景样式，橙色的even规则永远不会生效。同理nth-of-type(2)也找不到目标元素，因为每个.main-block里没有第二个同类型的div。

修复后的代码 #

把奇偶选择器应用在.main-block上（它们是.wrapper的直接子元素，能正确区分奇偶），再嵌套选中内部的.icon-block：

.wrapper {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(4, 1fr);
}

.main-block {
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #ebebeb;
  color: #ffffff;
  padding: 15px;
}

.icon-block {
  border-radius: 4px;
  padding: 10px;
}

/* 修改这里：针对.main-block的奇偶位置，再选中内部的.icon-block */
.main-block:nth-child(odd) .icon-block {
  background: blue;
}

.main-block:nth-child(even) .icon-block {
  background: orange;
}

HTML部分不需要修改：

<div class="wrapper">
  <div class="main-block">
    <div class="icon-block">
      <i>Lorem ipsum</i>
    </div>
  </div>
  <div class="main-block">
    <div class="icon-block">
      <i>Lorem ipsum</i>
    </div>
  </div>
</div>

效果说明 #

修改后，.wrapper下第1个（奇数）.main-block里的.icon-block会显示蓝色背景，第2个（偶数）.main-block里的.icon-block会显示橙色背景，后续新增的.main-block也会自动交替颜色。

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