nth-child交替布局失效：未跳过宽卡片导致样式异常

问题核心 #

你遇到的问题根源是**nth-child()选择器基于父元素下所有子元素的位置计数，而非仅筛选带目标class的元素后再计数**。中间的LG卡片容器（不带.customCard__column--sm类）会占据父元素的子元素位置，导致后续SM卡片的父元素位置序号被打乱，偏离了你预期的“仅针对SM卡片的奇偶分组”逻辑。

看你的父元素.row子元素顺序：

1. SM卡片容器（父元素第1位，odd）
2. SM卡片容器（父元素第2位，even）
3. LG卡片容器（父元素第3位，无SM类）
4. SM卡片容器（父元素第4位，even）
5. SM卡片容器（父元素第5位，odd）

你期望Card4（第3个SM卡片）和Card1样式一致、Card5（第4个SM卡片）和Card2样式一致，但当前CSS按父元素全局位置判断，导致Card4被判定为父元素的even、Card5被判定为父元素的odd，样式和预期完全相反。

解决方案 #

根据你的HTML结构（两个SM卡片 + 一个LG卡片的循环模式），用nth-child()的公式选择器就能精准匹配目标SM卡片：

修改后的CSS代码 #

main {
  background: #000000;
  font-family: "Poppins", sans-serif;
  color: #ffffff;
}

/* listing */
.listing {
  padding: 100px 0;
}

.customCard {
  border: 1px solid  #ffffff;
  padding: 30px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 80px;
  height: 300px;
}

@media (min-width: 768px) {
  /* 匹配父元素中第1、4、7...位的SM卡片（对应每组SM的第一个） */
  .customCard__column--sm:nth-child(3n+1) .customCard {
    margin-right: 18px;
  }
  /* 匹配父元素中第2、5、8...位的SM卡片（对应每组SM的第二个） */
  .customCard__column--sm:nth-child(3n+2) .customCard {
    margin-top: 120px;
    margin-left: 18px;
    margin-right: 0;
  }
}
@media (min-width: 1200px) {
  .customCard__column--sm:nth-child(3n+2) .customCard {
    margin-top: 178px;
  }
}
.customCard__column--sm .customCard--large {
  margin-right: 0;
}

原理说明 #

• 3n+1：匹配父元素中第1、4、7...个子元素，对应每组“两SM一LG”结构里的第一个SM卡片
• 3n+2：匹配父元素中第2、5、8...个子元素，对应每组结构里的第二个SM卡片

无论后续添加多少组相同结构，样式都会自动正确匹配，不会被LG卡片的位置干扰。

效果验证 #

修改后：

• Card1、Card4 → 应用margin-right:18px样式
• Card2、Card5 → 应用margin-top+margin-left样式
  完全符合你预期的瀑布流效果。

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