円シーケンスの正しさを再検証する

Question

円は 1、2、3、4 であると予想していましたが、出力は 4、1、2、3 でした。 position:absolute; がそれを引き起こしているかどうかはわかりません。フィードバックは大歓迎です。

リーリー

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

Answer 1

.circle:nth-child(n) 次の条件を満たす要素を選択してください:

• 有级サークル
• は親の 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)