HTML에서의 위치에 따라 동일한 클래스 이름을 가진 특정 요소를 어떻게 선택할 수 있습니까?

위치에 따라 주어진 클래스 이름을 가진 요소 선택

HTML 문서에서 적용되는 "myclass"라는 클래스를 정의했습니다. 여러 요소에. 마크업에서의 위치에 관계없이 이 클래스를 사용하여 첫 번째, 두 번째 또는 세 번째 요소를 선택하려고 합니다.

JavaScript나 jQuery를 사용하지 않고 이를 달성하려면 CSS 의사 선택기를 사용할 수 있습니다.

1. n번째 하위(항목 번호) 사용

이 선택기는 상위 요소 내의 n번째 하위 요소를 대상으로 합니다. 귀하의 경우에는 다음을 사용하고 싶을 것입니다:

.parent_class:nth-child(1) { }  // Selects first ".myclass" element
.parent_class:nth-child(2) { }  // Selects second ".myclass" element
.parent_class:nth-child(3) { }  // Selects third ".myclass" element

2. n번째 유형(항목 번호) 사용

이 선택기는 상위 요소 내에서 지정된 요소 유형이 n번째로 나타나는 것을 대상으로 합니다. "myclass" 클래스가 있는 "div" 요소를 선택하려면 다음을 사용합니다.

.myclass:nth-of-type(1) { }  // Selects first ".myclass" element
.myclass:nth-of-type(2) { }  // Selects second ".myclass" element
.myclass:nth-of-type(3) { }  // Selects third ".myclass" element

이러한 의사 선택기를 활용하면 위치에 따라 특정 요소를 효과적으로 타겟팅할 수 있으므로 다음을 적용할 수 있습니다. 각자 원하는 스타일로 다양하게.

위 내용은 HTML에서의 위치에 따라 동일한 클래스 이름을 가진 특정 요소를 어떻게 선택할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!