`nth-child` 失效常因选择器作用对象错误：`.card` 在 dom 中并非同级兄弟，而是各自嵌套在独立的 `.col-4` 容器内，因此需将 `:nth-child` 应用于其真实同级父元素（即 `.col-4`），再向下精准定位 `.card`。
在 SCSS（或 CSS）中，:nth-child(n) 伪类匹配的是在同级元素中排第 n 位的元素。关键前提是：这些目标元素必须是同一个父容器下的直接子元素（siblings）。
观察你提供的 HTML 结构：
.........
此时，三个 .card 元素并不处于同一父级下，它们分别位于三个独立的 .col-4 内。因此，对 .card 直接写 &:nth-child(1) 是无效的——每个 .card 都是其父 .col-4 的第一个且唯一的 .card 子元素，所以所有 .card 都会命中 :nth-child(1) 规则（即全部应用 -11.21deg），导致旋转效果“失效”。
✅ 正确解法：将 :nth-child 应用于真正的同级容器 .col-4，再通过嵌套选择器定位其内部的 .card：
立即学习“前端免费学习笔记（深入）”；
.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 层级结构。定位前务必检查目标元素是否真正同级——这是解决此类“样式批量失效”问题的核心逻辑。
