円は 1、2、3、4 であると予想していましたが、出力は 4、1、2、3 でした。 position:absolute; がそれを引き起こしているかどうかはわかりません。フィードバックは大歓迎です。
position:absolute;
https://stackblitz.com/edit/quasarframework-bybqfg?file=src/pages/IndexPage.vue
.circle:nth-child(n) 次の条件を満たす要素を選択してください:
.circle:nth-child(n)
サークル
DOM は次のようになります:
.q-card__section
.circle
.circle を別のコンテナでラップすると、 期待される結果 が得られる可能性があります。
期待される結果
// :nth-child(1)
// :nth-child(2)
：コンテンツ1 // :nth-child(1)
：コンテンツ 2 // :nth-child(2)
：コンテンツ 3 // :nth-child(3)
：コンテンツ 4 // :nth-child(4)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
.circle:nth-child(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 を別のコンテナでラップすると、
期待される結果が得られる可能性があります。// :nth-child(1)// :nth-child(2)：コンテンツ1 // :nth-child(1)：コンテンツ 2 // :nth-child(2)：コンテンツ 3 // :nth-child(3)：コンテンツ 4 // :nth-child(4)