CSS의 `:first-child` 선택기와 `:first-of-type` 선택기의 차이점은 무엇입니까?

:first-child와 :first-of-type의 미묘한 차이

:first-child와 :first의 미묘한 차이 이해 -of-type은 CSS 스타일링에서 중추적인 역할을 할 수 있습니다. 비슷하게 들리는 선택자에도 불구하고 이 두 가지 결과는 서로 다릅니다.

상위-하위 관계: 자세히 살펴보기

상위 요소 내의 모든 요소는 여러 하위 요소를 가질 수 있습니다. . 이 아이들 중에서 오직 한 사람만이 첫째 아이라는 구별을 주장할 수 있습니다. 이 독점적인 특성은 :first-child:

<div class="parent">
  <div>Child</div> <!-- :first-child -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

:first-of-type

의 힘에 의해 포착됩니다. 여기서 :first-child는 첫 번째 자식인 :first-of-type은 보다 구체적인 목적을 가지고 있습니다. 즉, 자식 위치에 관계없이 특정 유형의 첫 번째 요소를 대상으로 합니다. 문제의 유형이 div인 시나리오를 생각해 보십시오.

<div class="parent">
  <div>Child</div> <!-- div:first-child, div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

이 예에서 :first-child 및 :first-of-type은 모두 첫 번째 자식이자 첫 번째 자식이므로 동일한 요소를 식별합니다. div. 그러나 h1 요소를 첫 번째 자식으로 도입하면:

<div class="parent">
  <h1 id="Child">Child</h1> <!-- h1:first-child, h1:first-of-type -->
  <div>Child</div> <!-- div:nth-child(2), div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

h1은 첫 번째 자식 상태로 인해 :first-child 요구 사항을 충족합니다. 그러나 더 이상 첫 번째 div가 아닙니다. 결과적으로 첫 번째 div는 div에 대한 :first-of-type 일치가 됩니다.

핵심 사항

:first-child는 첫 번째 하위 항목을 정확히 찾아내는 반면, :first- of-type은 하위 위치에 관계없이 특정 유형의 첫 번째 요소를 찾습니다. 이러한 구별은 출생 순서와 고유 유형을 기반으로 특정 요소를 타겟팅할 때 매우 중요합니다.

위 내용은 CSS의 `:first-child` 선택기와 `:first-of-type` 선택기의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!