DOM 내의 위치에 따라 동일한 클래스 이름을 가진 요소의 스타일을 어떻게 지정합니까?

클래스 이름으로 특정 요소 타겟팅: CSS n번째 하위 접근 방식

과제: 클래스 이름이 같은 요소를 선택적으로 스타일 지정 위치에 관계없이 마크업의 위치에 관계없이.

해결책: nth-child() 또는 nth-of-type() 의사 선택기를 활용하여 내 서수 위치에 따라 요소를 대상으로 지정합니다. 상위 요소.

nth-child() 의사 선택기

nth-child(n) 의사 선택기를 사용하면 상위 요소의 n번째 하위 요소에 스타일을 지정할 수 있습니다. 예를 들어, "myclass" 클래스를 사용하여 첫 번째 요소를 대상으로 지정하려면:

<code class="css">.parent_class:nth-child(1) {
  color: #000;
}</code>

두 번째 및 세 번째 요소를 대상으로 지정하려면 다음 선택기를 사용하세요.

<code class="css">.parent_class:nth-child(2) {
  color: #FFF;
}

.parent_class:nth-child(3) {
  color: #006;
}</code>

nth-of-type () 의사 선택기

nth-of-type(n) 의사 선택기는 nth-child()와 유사하게 작동하지만 상위 내의 유형을 기반으로 요소를 선택합니다. 이는 상위 요소 내에 동일한 유형의 요소가 여러 개 있을 때 유용합니다.

<code class="css">.myclass:nth-of-type(1) {
  color: #000;
}

.myclass:nth-of-type(2) {
  color: #FFF;
}

.myclass:nth-of-type(3) {
  color: #006;
}</code>

예제 HTML:

<code class="html"><div class="parent_class">
  <div class="myclass">my text1</div>
  <!-- Other code -->

  <div class="myclass">my text2</div>
  <!-- Other code -->

  <div class="myclass">my text3</div>
  <!-- Other code -->
</div></code>

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