`nth-child` 失效常因选择器作用对象错误：`.card` 在 dom 中并非同级兄弟，而是各自嵌套在独立的 `.col-4` 容器内，因此需将 `:nth-child` 应用于其真实同级父元素（即 `.col-4`），再向下精准定位 `.card`。

在 SCSS（或 CSS）中，:nth-child(n) 伪类匹配的是在同级元素中排第 n 位的元素。关键前提是：这些目标元素必须是同一个父容器下的直接子元素（siblings）。

观察你提供的 HTML 结构：

<div class="row pt-5">
  <div class="col-4"> <!-- 第1个同级 .col-4 -->
    <div class="card">...</div> <!-- 它是 .col-4 的唯一子 .card -->
  </div>
  <div class="col-4"> <!-- 第2个同级 .col-4 -->
    <div class="card">...</div>
  </div>
  <div class="col-4"> <!-- 第3个同级 .col-4 -->
    <div class="card">...</div>
  </div>
</div>

此时，三个 .card 元素并不处于同一父级下，它们分别位于三个独立的 .col-4 内。因此，对 .card 直接写 &:nth-child(1) 是无效的——每个 .card 都是其父 .col-4 的第一个且唯一的 .card 子元素，所以所有 .card 都会命中 :nth-child(1) 规则（即全部应用 -11.21deg），导致旋转效果“失效”。

✅ 正确解法：将 :nth-child 应用于真正的同级容器 .col-4，再通过嵌套选择器定位其内部的 .card：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

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

.col-4 {
  &:nth-child(1) {
    .card {
      transform: rotate(-11.21deg);
    }
  }
  &:nth-child(2) {
    .card {
      transform: rotate(0);
    }
  }
  &:nth-child(3) {
    .card {
      transform: rotate(11.19deg);
    }
  }
}

? 进阶建议（提升可维护性）：

• 若卡片数量可能增加，推荐使用 SCSS 循环生成规则，避免硬编码：

@for $i from 1 through 3 {
  .col-4:nth-child(#{$i}) .card {
    $angle: if($i == 1, -11.21deg, if($i == 2, 0, 11.19deg));
    transform: rotate($angle);
  }
}

⚠️ 注意事项：

• 确保 .col-4 在 .row 下无其他同级干扰元素（如注释、空文本节点或额外
  ），否则 :nth-child(2) 可能错位；
• :nth-child 是基于物理位置而非类名匹配，与 .card 是否存在无关；
• 若需更灵活的样式控制（如响应式不同列数），可结合 CSS 自定义属性（--rotate-angle）+ style 内联设置，或改用 :nth-of-type（但此处不适用，因所有 .col-4 类型一致）。

总结：:nth-child 的有效性完全取决于 DOM 层级结构。定位前务必检查目标元素是否真正同级——这是解决此类“样式批量失效”问题的核心逻辑。