为什么nth-child在我的站点中不生效，在样板代码中却可以正常运行？

问题根源 #

nth-child选择器的匹配规则是当前元素在同级兄弟节点中的排序，你现有HTML结构里每个.character都被单独包裹在独立的.characters容器中，每个容器内只有1个.character元素，所以所有.character在各自父级下都是第1个（奇数）子元素，只会匹配:nth-child(odd)规则，自然无法实现交错排布。

修复方案 #

第一步：调整HTML结构

把所有.character节点都放在同一个.characters父容器下，不要给每个.character单独套.characters容器：

<div class="characters">
  <div class="character">
    <div class="characterImage">
      <img src="images/user.png" alt="Placeholder Image" />
    </div>
    <div class="characterDetails">
      <h2>Character</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non ex mattis neque condimentum pharetra non ac urna. Aliquam eleifend id sapien id convallis. Duis gravida pharetra lorem ut fermentum. Mauris semper neque vel imperdiet convallis. Fusce volutpat mi nec elit blandit luctus. Morbi lorem elit, facilisis vitae mi id, tempus scelerisque erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p><br>
      <p>Aenean sed dui magna. Proin eleifend risus eget porta bibendum. Donec ut diam sed tellus tempor mattis. Mauris at pharetra eros. Donec in volutpat sapien, ut ullamcorper tortor. Morbi placerat massa enim, vel tempor ante facilisis non. Praesent sollicitudin ante vitae pellentesque pretium. Curabitur ut leo mattis, convallis nisi eu, hendrerit dolor. Nullam sed efficitur risus. Proin quis dui commodo, sollicitudin purus id, blandit lacus. Fusce porta auctor varius. Fusce a ultrices nibh. Curabitur semper turpis ex, sit amet suscipit mauris ultricies ut. </p>
    </div>
  </div>

  <div class="character">
    <div class="characterImage">
      <img src="images/user.png" alt="Placeholder Image" />
    </div>
    <div class="characterDetails">
      <h2>Character</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non ex mattis neque condimentum pharetra non ac urna. Aliquam eleifend id sapien id convallis. Duis gravida pharetra lorem ut fermentum. Mauris semper neque vel imperdiet convallis. Fusce volutpat mi nec elit blandit luctus. Morbi lorem elit, facilisis vitae mi id, tempus scelerisque erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p><br>
      <p>Aenean sed dui magna. Proin eleifend risus eget porta bibendum. Donec ut diam sed tellus tempor mattis. Mauris at pharetra eros. Donec in volutpat sapien, ut ullamcorper tortor. Morbi placerat massa enim, vel tempor ante facilisis non. Praesent sollicitudin ante vitae pellentesque pretium. Curabitur ut leo mattis, convallis nisi eu, hendrerit dolor. Nullam sed efficitur risus. Proin quis dui commodo, sollicitudin purus id, blandit lacus. Fusce porta auctor varius. Fusce a ultrices nibh. Curabitur semper turpis ex, sit amet suscipit mauris ultricies ut. </p>
    </div>
  </div>
</div>

第二步：可简化CSS代码（可选）

默认flex子元素的order值为0，你只需要写偶数位的覆盖规则即可，不需要重复写奇数位的规则：

.character img {
  height: 200px;
}

.character {
  display: flex;
  align-items: center;
}

.character:nth-child(even) .characterDetails {
  order: 1;
}

.character:nth-child(even) .characterImage {
  order: 2;
}

调整后就可以实现奇数区块左图右文、偶数区块左文右图的交错效果了。

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