원 순서의 정확성 재검토

Question

원은 1,2,3,4가 될 것으로 예상했는데 출력은 4,1,2,3입니다. position:absolute; 때문에 이런 일이 발생했는지는 모르겠습니다. 어떤 피드백이라도 환영합니다.

으아아아

https://stackblitz.com/edit/quasarframework-bybqfg?file=src%2Fpages%2FIndexPage.vue

Answer 1

.circle:nth-child(n) 다음 조건을 충족하는 요소를 선택하세요.

• 클래식circle
• 는 부모의 n번째 자식입니다.

DOM은 다음과 같습니다:

• .q-card__section // :n번째-자식(1)
• .circle：내용 1 // :n번째-자식(2)
• .circle：내용 2 // :n번째-자식(3)
• .circle：내용 3 // :n번째-자식(4)
• .circle：내용 4 // :n번째-자식(5)

별도의 용기에 포장하면 기대되는 결과.circle를 얻을 수 있습니다.

• .q-card__section // :n번째-자식(1)
• div // :n번째-자식(2)
  • .circle：내용 1 // :n번째-자식(1)
  • .circle：내용 2 // :n번째-자식(2)
  • .circle：내용 3 // :n번째-자식(3)
  • .circle：내용 4 // :n번째-자식(4)