CSS `n번째 유형`을 사용하여 특정 클래스로 세 번째 요소를 모두 타겟팅하려면 어떻게 해야 합니까?

CSS 3 n번째 유형 클래스로 제한됨

n번째 유형 선택기를 사용하면 특정 유형의 모든 n번째 하위 항목을 선택할 수 있습니다. . 그러나 이 선택을 특정 클래스로 제한하는 것은 어려울 수 있습니다.

문제:

마크업에 관계없이 세 번째 .module 요소를 동적으로 타겟팅하려고 합니다. . 그러나 n번째 유형은 클래스가 아닌 요소 유형을 기준으로 계산합니다.

해결책:

현재 n번째 유형을 제한하는 직접적인 방법은 없습니다. -특정 클래스를 입력합니다. 한 가지 해결 방법은 세 번째 .module 요소마다 추가 클래스를 수동으로 추가하는 것입니다.

예를 들어 제공된 HTML에서

<section class="featured module">
  <h1>NOT A VIDEO</h1>
</section>

<section class="featured module third">
  <h1>NOT A VIDEO (3)</h1>
</section>

<section class="featured module">
  <h1>NOT A VIDEO</h1>
</section>

<section class="featured module third">
  <h1>NOT A VIDEO (6)</h1>
</section>

그런 다음 다음 CSS 스타일을 적용합니다.

.featured.module.third {
  padding-right: 0;
  background: red;
}

이제 .module 클래스의 세 번째 항목마다 추가 .third를 사용하여 스타일을 지정합니다. class.

참고:

이 해결 방법을 사용하려면 .module 요소를 추가하거나 제거할 때 수동 유지 관리가 필요합니다. 고급 시나리오의 경우 JavaScript 또는 CSS 전처리기를 사용하여 필요한 클래스를 자동으로 생성하는 것이 좋습니다.

위 내용은 CSS `n번째 유형`을 사용하여 특정 클래스로 세 번째 요소를 모두 타겟팅하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!