특정 HTML 요소를 선택할 때 'n번째 하위' 선택자와 'n번째 유형' 선택자는 어떻게 다릅니까?

n번째 하위 또는 n번째 유형으로 특정 요소 선택

HTML에서는 다음을 기반으로 목록 내에서 특정 요소를 선택해야 하는 상황이 있습니다. 마크업에서의 위치에 상관없이 클래스 이름입니다. 이를 달성하기 위해 CSS는 nth-child 및 nth-of-type이라는 두 가지 필수 선택기를 제공합니다.

nth-child

nth-child를 사용하면 상대 위치에 따라 요소를 선택할 수 있습니다. 그 형제자매들에게. 예를 들어, div.myclass:nth-child(1)는 상위 컨테이너 내에서 myclass 클래스가 있는 첫 번째 요소를 선택합니다.

예:

<code class="html"><div class="parent_class">
    <div class="myclass">my text1</div>
    <!-- omitted code -->
    <div class="myclass">my text2</div>
    <!-- omitted code -->
    <div class="myclass">my text3</div>
    <!-- omitted code -->
</div></code>

<code class="css">.parent_class:nth-child(1) { /* first .myclass within .parent_class */ }
.parent_class:nth-child(2) { /* second .myclass within .parent_class */ }
.parent_class:nth-child(3) { /* third .myclass within .parent_class */ }</code>

nth-of-type 사용

nth-of-type은 nth-child와 유사하지만 동일한 태그 이름을 가진 다른 요소에 대한 상대적인 위치를 기준으로 요소를 선택합니다. 이 경우 div.myclass:nth-of-type(1)은 다른 태그가 있는 중간 요소에 관계없이 상위 컨테이너 내에서 myclass 클래스가 있는 첫 번째 요소를 선택합니다.

예:

이전과 동일한 HTML 코드 사용:

<code class="css">.myclass:nth-of-type(1) { /* first .myclass, regardless of its container */ }
.myclass:nth-of-type(2) { /* second .myclass, regardless of its container */ }
.myclass:nth-of-type(3) { /* third .myclass, regardless of its container */ }</code>

이러한 선택기를 활용하면 주어진 클래스 이름으로 특정 요소를 정확하게 타겟팅할 수 있으므로 복잡하고 동적인 페이지 레이아웃이 가능합니다. 문서 구조 내 위치에 따라 결정됩니다.

위 내용은 특정 HTML 요소를 선택할 때 'n번째 하위' 선택자와 'n번째 유형' 선택자는 어떻게 다릅니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!