重新檢視圓序列的正確性

Question

我預期圓圈是1,2,3和4，但輸出是4,1,2和3。我不知道是否是position:absolute;導致它發生。歡迎收到任何回饋。

<template>
  <q-page class="column flex-center">
    <q-card class="my-card">
      <q-card-section>
        <div class="text-h6">Our Changing Planet</div>
        <div class="text-subtitle2">by John Doe</div>
      </q-card-section>

      <div
        v-for="index in 4"
        :key="index"
        class="circle"
        :style="`background-color: ${[index]}`"
      >
        {{ index }}
      </div>
    </q-card>
  </q-page>
</template>

<script setup></script>
<style lang="scss">
.my-card {
  width: 200px;
  height: 200px;
}

.circle {
  position: absolute;
  top: 20px;
  right: 0;
  background-color: $positive;
  width: 20px;
  height: 20px;
  border-radius: 50% !important;
  z-index: 1;
}

.circle:nth-child(2) {
  top: 40px;
  background-color: $negative;
}

.circle:nth-child(3) {
  top: 60px;
  background-color: orange;
}

.circle:nth-child(4) {
  top: 100px;
  background-color: grey;
}
</style>

https://stackblitz.com/edit/quasarframework-bybqfg?file=src/pages/IndexPage.vue

Answer 1

.circle:nth-child(n) 選擇符合下列條件的元素：

• 有類別circle
• #是其父級的第 n 個子級。

你的 DOM 看起來像這樣：

• .q-card__section // :nth-child(1)
• .circle：內容 1 // :nth-child(2)
• .circle：內容 2 // :nth-child(3)
• .circle：內容 3 // :nth-child(4)
• .circle：內容 4 // :nth-child(5)

您可能會得到預期結果 透過將 .circle 包裝在單獨的容器中：

• .q-card__section // :nth-child(1)
• div // :nth-child(2)
  • .circle：內容 1 // :nth-child(1)
  • .circle：內容 2 // :nth-child(2)
  • .circle：內容 3 // :nth-child(3)
  • .circle：內容 4 // :nth-child(4)