重新审视圆序列的正确性

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%2Fpages%2FIndexPage.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)