`nth-child` 在 `.card` 上无效，是因为每个 `.card` 的父元素（`.col-4`）下仅有一个 `.card` 子元素，导致所有 `:nth-child(n)` 均匹配第一个子项。正确做法是将选择器上移至真正的兄弟容器（如 `.col-4`），再通过后代选择器作用于 `.card`。
在使用 SCSS 构建响应式卡片布局（例如基于 Bootstrap 的三列步骤展示）时，若希望每张卡片呈现不同旋转角度（如轻微倾斜以增强视觉层次），直接在 .card 上使用 &:nth-child(n) 是常见误区。根本原因在于：:nth-child() 匹配的是其父元素下的第 n 个子元素，而你的 HTML 结构中，每个 .card 都独占一个 .col-4 容器 —— 换言之，每个 .card 在其父级 .col-4 中都是唯一的、且恒为 :nth-child(1)。因此，SCSS 编译后所有 .card:nth-child(1) 规则均生效，最终全部应用了 -11.21deg 旋转。
✅ 正确解法：将 :nth-child() 应用于真正互为兄弟的容器元素 —— 即外层的 .col-4 元素。它们同属 .row 的直接子元素，构成连续的兄弟节点，nth-child 才能准确区分第 1、2、3 个列区块。
以下是推荐的 SCSS 写法（兼容 Bootstrap 5+）：
.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);
}
}
}? 进阶提示：
立即学习“前端免费学习笔记（深入）”；
- 若未来卡片数量动态扩展，建议改用 :nth-of-type() 或结合 CSS 自定义属性（CSS Custom Properties）配合 JS 控制，提升可维护性；
- 注意 transform 会触发重排（layout），大量卡片时建议添加 will-change: transform 作轻量优化（仅在必要时）；
- 确保 .card 元素未被其他样式（如 transform: none 或更高优先级规则）意外覆盖，可借助浏览器开发者工具的“Computed”面板验证最终生效值。
总结：:nth-child 的有效性完全取决于 DOM 层级结构，而非视觉顺序。始终检查目标元素的直接父容器中是否存在多个同级目标元素——若无，则需向上寻找真正的兄弟节点，并通过嵌套选择器精准定位子元素。
