理解 CSS nth-child：实现精确交替布局的策略与实践

2. 常见误区与布局挑战

开发者在使用 nth-child 时常遇到的一个误区是，认为 选择器:nth-child(n) 会先筛选出符合 选择器 的元素，然后再对这些元素进行 n 次计数。但实际上并非如此。

立即学习“前端免费学习笔记（深入）”；

考虑以下示例，一个包含不同宽度卡片的列表，目标是为所有 .customCard__column--sm 类型的卡片实现交替的边距效果，使其呈现瀑布流（masonry）布局。

原始 HTML 结构：

<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>

原始 CSS 样式：

Favird No-Code Tools

无代码工具的聚合器

下载

@media (min-width: 768px) {
  /* 期望：针对所有 .customCard__column--sm 中的奇数项 */
  .customCard__column--sm:nth-child(odd) .customCard {
    margin-right: 18px;
  }
  /* 期望：针对所有 .customCard__column--sm 中的偶数项 */
  .customCard__column--sm:nth-child(even) .customCard {
    margin-top: 120px;
    margin-left: 18px;
    margin-right: 0;
  }
}

在这个例子中，开发者期望 Card 4 (SM) 能够应用 even 样式，因为它在 .customCard__column--sm 序列中是第3个，但实际上它被应用了 odd 样式。原因在于：

• Card 1 (SM) 是父元素 .row 的第1个子元素（奇数），且匹配 .customCard__column--sm。
• Card 2 (SM) 是父元素 .row 的第2个子元素（偶数），且匹配 .customCard__column--sm。
• Card 3 (LG) 是父元素 .row 的第3个子元素（奇数），但不匹配 .customCard__column--sm，因此不会被上述规则选中。
• Card 4 (SM) 是父元素 .row 的第4个子元素（偶数），且匹配 .customCard__column--sm。
• Card 5 (SM) 是父元素 .row 的第5个子元素（奇数），且匹配 .customCard__column--sm。

因此，Card 4 (SM) 按照 nth-child 的规则被视为偶数位置的元素，而不是 .customCard__column--sm 序列中的第3个（奇数）。

值得一提的是，:nth-of-type(n) 伪类选择器虽然可以根据元素的标签类型进行计数，但如果所有子元素都是相同的标签类型（例如本例中都是 div），那么 div:nth-of-type(n) 的行为与 div:nth-child(n) 几乎一致，无法解决不同类名但相同标签类型元素混排时的计数问题。

3. 解决方案：实现精确的交替布局

当 nth-child 无法直接满足精确的序列计数需求时，我们需要采取其他策略。以下是几种推荐的解决方案：

方法一：通过辅助类管理序列（推荐）

这是最灵活且直接的解决方案。通过手动、JavaScript 或后端模板语言为需要进行精确交替布局的元素添加特定的辅助类（例如 is-odd-sm 或 is-even-sm），然后基于这些类来应用样式。

**修改后的 HTML