n번째 하위 또는 n번째 유형 선택기를 사용하여 특정 요소를 어떻게 선택합니까?

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

주어진 항목으로 첫 번째, 두 번째 또는 세 번째 요소를 선택하려면 클래스 이름에 따라 n번째 하위 또는 n번째 유형 의사 선택기를 활용할 수 있습니다. 이러한 선택기를 사용하면 상위 컨테이너 내의 위치 또는 동일한 유형의 형제 간의 위치를 ​​기반으로 특정 요소를 타겟팅할 수 있습니다.

n번째 하위 사용

n번째- 자식 선택자는 부모의 모든 자식 요소 중에서 위치에 따라 요소를 선택합니다. 클래스 이름으로 특정 요소를 대상으로 지정하려면 상위 컨테이너 내에 요소를 래핑하고 다음 구문을 사용합니다.

<code class="css">parent_container:nth-child(item number) { ... }</code>

예를 들어 요소가 클래스 이름이 "parent_class인 상위 요소 내에 포함되어 있는 경우, " 다음과 같이 클래스 이름이 "myclass"인 첫 번째, 두 번째 및 세 번째 요소를 선택할 수 있습니다.

<code class="css">.parent_class:nth-child(1) { ... }
.parent_class:nth-child(2) { ... }
.parent_class:nth-child(3) { ... }</code>

n번째 유형 사용

n번째 유형 선택기는 동일한 유형의 형제 중에서 위치에 따라 요소를 선택합니다. 이는 상위 컨테이너 내에 여러 클래스가 있고 특정 클래스 이름을 가진 특정 요소를 대상으로 지정하려는 경우에 유용합니다. 구문은 nth-child와 유사합니다.

<code class="css">class_name:nth-of-type(item number) { ... }</code>

이를 예제에 적용하면 다음과 같이 클래스 이름이 "myclass"인 첫 번째, 두 번째, 세 번째 요소를 선택할 수 있습니다.

<code class="css">.myclass:nth-of-type(1) { ... }
.myclass:nth-of-type(2) { ... }
.myclass:nth-of-type(3) { ... }</code>

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