Meneliti semula ketepatan jujukan bulatan

Question

Saya menjangkakan bulatan ialah 1,2,3 dan 4, tetapi outputnya ialah 4,1,2 dan 3. Saya tidak tahu sama ada position:absolute; menyebabkan ia berlaku. Sebarang maklum balas adalah dialu-alukan.

<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) Pilih elemen yang memenuhi syarat berikut:

• Berkelascircle
• ialah anak ke-1 kepada ibu bapanya.

DOM anda kelihatan seperti ini:

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

Anda boleh mendapat hasil yang dijangkakan dengan membungkus .circle dalam bekas berasingan:

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