nth-child 交替布局不起作用（不跳过卡片）[重复]答案

【问题标题】：nth-child alternating layout not working (not skipping cards) [duplicate]nth-child 交替布局不起作用（不跳过卡片）[重复]
【发布时间】：2022-10-14 21:33:20
【问题描述】：

我有一个部分，其中每张even 卡都有margin，以赋予它砖石类型的效果。

我有两种类型的卡片，它们仅根据它们占据的宽度而有所不同。

在我的演示中，我将每张 sm 卡包装在 .customCard__column--sm 类中。这个类是它与更广泛的卡片的区别。

在我的 CSS 中，我定义了具有 .customCard__column--sm 类的 even .customCard 以具有 margin。

但是，在我的演示中，卡 4 使用的是 nth-child(odd) css。

卡片 4 和 5 应遵循与卡片 1 和 2 相同的模式。

为什么会这样？

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) {
  .customCard__column--sm:nth-child(odd) .customCard {
    margin-right: 18px;
  }
}
@media (min-width: 768px) {
  .customCard__column--sm:nth-child(even) .customCard {
    margin-top: 120px;
    margin-left: 18px;
    margin-right: 0;
  }
}
@media (min-width: 1200px) {
  .customCard__column--sm:nth-child(even) .customCard {
    margin-top: 178px;
  }
}
.customCard__column--sm .customCard--large {
  margin-right: 0;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<main class="listing">
  <div class="container">
    <div class="row">

      <div class="col-12 col-md-6 d-flex customCard__column customCard__column--sm">
        <article class="customCard">Card 1 (SM)</article>
      </div>
      
      <div class="col-12 col-md-6 d-flex customCard__column customCard__column--sm">
        <article class="customCard">Card 2 (SM)</article>
      </div>
      
      <div class="col-12 d-flex customCard__column">
        <article class="customCard customCard--large">Card 3 (LG)</article>
      </div>
 
      <div class="col-12 col-md-6 d-flex customCard__column customCard__column--sm">
        <article class="customCard">Card 4 (SM)</article>
      </div>
      
      <div class="col-12 col-md-6 d-flex customCard__column customCard__column--sm">
        <article class="customCard">Card 5 (SM)</article>
      </div>

    </div>
  </div>
</main>

【问题讨论】：

标签： html css sass

【解决方案1】：

:nth-child 表示“第 n 个孩子”。这并不意味着“第 n 个孩子只计算此选择器的其他功能”。

卡片 4 是第 5 个孩子（<div class="row">），它是一个奇数。

您需要使用标记（例如另一个类名）来处理序列重置时的区分。

【讨论】：