HTML에서 동일한 클래스 이름을 가진 특정 요소를 선택하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

HTML에서 동일한 클래스 이름을 가진 특정 요소를 선택하는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-11-04 08:28:01

원래의

929명이 탐색했습니다.

How to Select Specific Elements with the Same Class Name in HTML?

주어진 클래스 이름으로 특정 요소 선택

HTML 요소로 작업할 때 목록에서 특정 요소를 선택해야 하는 경우가 종종 있습니다. 클래스 이름을 공유하는 요소. 이는 클래스의 특정 인스턴스에 스타일을 적용하거나 작업을 수행하는 데 특히 유용할 수 있습니다.

n번째 하위 사용

클래스 목록 내에서 특정 요소를 선택하는 한 가지 접근 방식 nth-child() 의사 클래스 선택기를 사용하는 것입니다. 이 선택기를 사용하면 상위 요소 내에서 n번째로 나타나는 요소를 선택할 수 있습니다.

예:

<code class="html"><div class="parent_class">
    <div class="myclass">my text1</div>
    <!-- some other code+containers... -->

    <div class="myclass">my text2</div>
    <!-- some other code+containers... -->

    <div class="myclass">my text3</div>
    <!-- some other code+containers... -->
</div>

.parent_class:nth-child(1) { /* styles for the first element with the "myclass" class within the "parent_class" element */ }
.parent_class:nth-child(2) { /* styles for the second element with the "myclass" class within the "parent_class" element */ }
.parent_class:nth-child(3) { /* styles for the third element with the "myclass" class within the "parent_class" element */ }</code>

로그인 후 복사

n번째 항목 사용 유형

또는 다음을 사용할 수도 있습니다. nth-of-type() 의사 클래스 선택자. 이 선택기를 사용하면 상위 요소 내에서 특정 유형의 요소가 n번째로 나타나는 것을 선택할 수 있습니다.

예:

<code class="css">.myclass:nth-of-type(1) { /* styles for the first element with the "myclass" class */ }
.myclass:nth-of-type(2) { /* styles for the second element with the "myclass" class */ }
.myclass:nth-of-type(3) { /* styles for the third element with the "myclass" class */ }</code>

로그인 후 복사

nth-child() 또는 nth-of-type()을 효과적으로 선택할 수 있습니다. 마크업에서의 위치에 관계없이 특정 클래스 이름을 가진 특정 요소를 선택하고 이에 따라 스타일을 적용하거나 작업을 수행합니다.

위 내용은 HTML에서 동일한 클래스 이름을 가진 특정 요소를 선택하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!