如何使用 CSS :nth-child() 为轮播卡片实现差异化旋转效果

`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 层级结构。定位前务必检查目标元素是否真正同级——这是解决此类“样式批量失效”问题的核心逻辑。