:first-child 대 :first-of-type: 언제 각 CSS 의사 클래스를 사용해야 합니까?
- Barbara Streisand원래의
- 2024-12-09 04:06:18867검색
:first-child 및 :first-of-type을 사용한 요소 선택
CSS에서 의사 클래스 :first-child :first-of-type 및 :first-of-type은 모두 상위 요소 내의 위치를 기준으로 요소를 선택합니다. 그러나 "first"를 정의하는 방법은 다릅니다.
Element:first-child
:first-child는 관계없이 지정된 상위 요소의 첫 번째 하위 요소를 선택합니다. 요소 유형 중 하나입니다. 제공된 예에서:
div:first-child
이 선택기는 모든
상위 요소의 첫 번째 하위 요소입니다. 상위 요소에 다른 요소 유형이 포함되어 있으면 선택되지 않습니다.
Element:first-of-type
:first-of-type은 첫 번째 요소를 선택합니다. 상위 요소 내의 특정 요소 유형의 인스턴스입니다. 첫 번째
요소 전체의 첫 번째 하위 요소가 아니더라도 마찬가지입니다. 예:
div:first-of-type
제공된 HTML에서
<div class="parent"> <div>Child</div> <h1>
:first-of-type은
의 첫 번째 인스턴스로 "parent" 클래스를 사용합니다. 요소이고, ID가 "first"인 경우
ID가 "first"인 경우 element.
주요 차이점
- 요소 계층: :first-child는 하위 순서를 기준으로 일치하지만 :first-of- 유형은 요소 유형과 해당 유형 내 위치에 따라 일치합니다.
- 개수 일치: :first-child는 상위 요소당 하나의 요소만 일치할 수 있는 반면, :first-of-type은 동일한 유형의 여러 요소와 일치할 수 있습니다.
- 특이성: :first- of-type은 일반적으로 :first-child보다 특이도가 더 높습니다. 즉, CSS에서 우선순위를 갖습니다. 규칙.
사용 예
:first-child를 사용하여 다음을 선택합니다.
- 첫 번째 순서가 지정되지 않은 목록의 목록 항목: ul li:first-child
- 제목 목록의 첫 번째 블로그 게시물: 기사 .blog-post:first-child h2
:first-of-type을 사용하여 다음을 선택하세요.
- 문서의 첫 번째 제목(
,
등): 본문 :first-of-type
- 양식의 첫 번째 버튼: form 버튼:first-of-type
위 내용은 :first-child 대 :first-of-type: 언제 각 CSS 의사 클래스를 사용해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.