CSS 유사 선택기: :선행형과 :선행형의 차이점이 무엇입니까?

반응형

first-of-type과 first-child는 매우 유사한 유사 선택기이며 종종 동일한 요소를 대상으로 한다. 그들이 그렇지 않을 때는 혼란스러울 수 있으니, 그들이 무엇을 하는지 보자.

첫째 아이

첫째 자식 요소는 첫째 자식 요소만 봅니다. 예에서 .example-one div:first-child {} 아래의 예에서 첫 번째 div가 선택됩니다. 예제 2를 사용하여 .example-2 div: 첫째 자식 {}을(를) 쓴다면 아무것도 선택하지 않을 것이다. 첫째 자식은 점이 아니라

이기 때문입니다.

  <section class="example-one"> 
    <div></div>
    <div></div>
    <div></div>
  </section>

  <section class="example-two">
    <h1>Hello World</h1>
    <div></div>
    <div></div>
  </section>

 

첫 번째 유형

첫 번째 유형의 유사 선택기를 사용하면 해당 유형과 일치하는 첫 번째 하위 요소가 선택됩니다. 위와 같은 코드지만 First-of-type을 고려하십시오.

예제-1 div:first-of-type {}은(는) 여전히 첫 번째 <div를 선택합니다. 첫째 아이고 첫째 유형이기 때문입니다.

                                           예제-2 div:첫 번째 유형 {}은(는) 첫째 자식과 마찬가지로 아무것도 선택하지 않지만 유형 <div>의 첫 번째 요소인 두 번째 자식 항목을 선택합니다.

마찬가지잖아?

 

첫째 자식 의사 선택기와 일치하는 요소는 하나만 있을 수 있습니다. 이는 모든 상위 요소에는 해당 리스트의 첫 번째 요소만 있기 때문입니다.

모든 상위 요소에 대해 여러 가지 유형의 요소가 있을 수 있습니다. 상위 요소의 자식인 모든 요소는 첫 번째 유형의 유사 선택기를 사용하여 선택할 수 있습니다.