Réexamen de l'exactitude de la séquence de cercles

Question

Je m'attendais à ce que les cercles soient 1,2,3 et 4, mais le résultat est 4,1,2 et 3. Je ne sais pas si position:absolute; a provoqué cela. Tout commentaire est le bienvenu.

<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) Sélectionnez les éléments qui remplissent les conditions suivantes :

• Classycircle
• est le nième enfant de son parent.

Votre DOM ressemble à ceci :

• .q-card__section // :ntième-enfant(1)
• .circle：Contenu 1 // :ntième-enfant(2)
• .circle：Contenu 2 // :ntième-enfant(3)
• .circle：Contenu 3 // :ntième-enfant(4)
• .circle：Contenu 4 // :ntième-enfant(5)

Vous pouvez obtenir les résultats attendus en emballant .circle dans un récipient séparé :

• .q-card__section // :ntième-enfant(1)
• div // :ntième-enfant(2)
  • .circle：Contenu 1 // :ntième-enfant(1)
  • .circle：Contenu 2 // :ntième-enfant(2)
  • .circle：Contenu 3 // :ntième-enfant(3)
  • .circle：Contenu 4 // :ntième-enfant(4)