CSS 첫 번째 자식과 n 번째 자식의 차이점은 무엇입니까

CSS 첫 번째 자식과 n번째 자식의 차이점: 1. 첫 번째 자식은 의사 클래스 선택기입니다. 이는 부모 요소의 첫 번째 자식 요소와 일치함을 의미합니다. 2. nth-child는 부모 요소의 n번째 자식 요소와 일치함을 의미합니다. 부모 요소.

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터.

추천: "css 비디오 튜토리얼"

first-child

E: first-child는 의사 클래스 선택자이며,

부모 요소의 첫 번째 자식 요소 E와 일치합니다

볼 수 있듯이 설명에서 E는 상위 요소가 아니라 선택하려는 첫 번째 하위 요소입니다. 처음에는 E:first-child가 E의 첫 번째 자식 요소인 줄 착각했습니다.

:nth-child(n)

은 하위 요소이기도 한 상위 요소의 n번째 하위 요소 E

E와 일치하며 상위 요소 아래의 n번째 하위 요소에만 일치할 수 있습니다. n은 1

<ul>
  <li>l1</li>
  <li>l2</li>
  <li>l3</li>
</ul>

l1

ul>li:first-child

l2

ul>li:nth-child( 2)를 선택하려면

<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>

이때 첫 번째 p 요소를 선택하고 p:first-child를 적용하면 p의 상위 요소가 div이고, div의 경우 첫 번째 하위 요소가 p가 아니라 h1이므로 오류가 발생합니다. 선택기가 p:first-child이면 잘못됩니다.

마찬가지로 E:last-child``E:only-child는 위와 동일합니다. E 요소는 마지막 하위 요소이거나 상위 요소의 유일한 하위 요소여야 합니다.

더 많은 프로그래밍 관련 지식을 확인하세요. 방문: 프로그래밍 튜토리얼! !

위 내용은 CSS 첫 번째 자식과 n 번째 자식의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!