첫 번째 유형과 첫 번째 자녀의 차이점은 무엇입니까?

본 글은 초등학생과 초등학생의 차이에 대한 내용입니다. 도움이 필요한 친구들이 참고하시면 좋을 것 같습니다.

위의 설명은 이해하기 어려워 보일 수 있으니, 예문과 결합해야 제대로 이해하실 수 있습니다.

<div>
    <h1></h1>
    <p></p>
    <span></span>
    <span></span>
</div>

(1): first-child

h1: first-child: h1 요소가 div의 첫 번째 하위 요소이므로 h1 요소가 선택됩니다.

p:first-child: p는 div의 첫 번째 하위 요소가 아니고 div의 두 번째 하위 요소이므로 요소를 선택할 수 없습니다.

span:first-child:span은 div의 첫 번째 하위 요소가 아니고 div의 세 번째 하위 요소이므로 요소를 선택할 수 없습니다.

(2): first-of-type

h1: first -of; -type: h1 요소가 div의 모든 h1 요소 중 첫 번째 h1 요소이기 때문에 선택됩니다. 실제로 h1의 하위 요소는 하나만 있습니다.

p: first-of-type: 선택은 다음과 같습니다. p 요소는 div의 모든 p 요소 중 첫 번째 p 요소이기 때문입니다. 실제로 p의 하위 요소는 하나만 있습니다.

span: first-of-type: selected id="first; "span 요소는 div 요소에 두 개의 범위 요소가 있으므로 두 개 중 첫 번째 요소를 선택합니다.

요약:

":first-child"는 (요소 유형에 관계없이) 상위 요소 아래의 첫 번째 하위 요소를 선택하고, ":first-of-type"은 상위 요소 아래의 첫 번째 하위 요소를 선택합니다( 요소 유형을 구별합니다).

":last-child" 및 ":last-of-type", "nth-child(n)" 및 ":nth-of-type(n)"도 이런 방식으로 이해될 수 있지만 그렇지 않습니다. 여기서는 중복됩니다.

위는 first-of-type과 first child의 차이점에 대한 완전한 소개입니다. CSS3 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹사이트를 주목하세요.

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