scss：第n个孩子不会为轮换卡工作

Question

我现在不知道我做错了什么？ 每张卡的旋转必须不同。 但是 :nth-child() 不起作用？

有人知道我做错了什么吗？ 每个（卡）走 -11.21deg ...

我尝试了 &:nth-child(n-2) 但效果不佳。 或者也许还有另一种方法让它工作。

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

<div class="row pt-5">
  <div class="col-4">
    <div class="card">
      <div class="bg-clr-gradient d-flex align-items-center">
        <h1 class="big px-2">1.</h1>
        <h3 class="text-white">Vraag uw offerte aan</h3>
      </div>
      <div class="steps-foto">
        <img src="fotos/fotograaf.png" alt="">
      </div>
    </div>
  </div>
  <div class="col-4">
    <div class="card">
      <div class="bg-clr-gradient d-flex align-items-center">
        <h1 class="big px-2">2.</h1>
        <h3 class="text-white">Wij matchen</h3>
      </div>
      <div class="steps-foto">
        <img src="fotos/fotograaf.png" alt="">
      </div>
    </div>
  </div>
  <div class="col-4">
    <div class="card">
      <div class="bg-clr-gradient d-flex align-items-center">
        <h1 class="big px-2">3.</h1>
        <h3 class="text-white">Ontvang verschillende voorstellen en vergelijk</h3>
      </div>
      <div class="steps-foto">
        <img src="fotos/fotograaf.png" alt="">
      </div>
    </div>
  </div>
</div>

Answer 1

正如@GabrielePetrioli 在评论中所建议的那样，您正在使用

&:nth-child

选择器，这些元素是其父元素的单个子元素。您必须将

&:nth-child

选择器移动到它们的父级，它们是 DOM 中的兄弟姐妹。

简而言之，替换：

/* ❌ does not work */
.card {
  &:nth-child(1) {
    transform: rotate(-11.21deg);
  }
  &:nth-child(2) {
    transform: rotate(0);
  }
  &:nth-child(3) {
    transform: rotate(11.19deg);
  }
}

与：

/* ✅ works! */ 
.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);
    }
  }
}