CSS 'n번째 유형'을 특정 클래스의 요소로 제한할 수 있나요?

CSS 3 n번째 유형을 특정 클래스로 제한

질문:

CSS 3의 n번째 유형 선택기를 구체화하여 내의 요소만 대상으로 지정하는 방법이 있습니까? 특정 클래스?

배경:

고유한 클래스로 표시되는 다양한 레이아웃을 갖춘 동적 섹션이 있는 시나리오를 생각해 보세요. 목표는 다른 요소에 영향을 주지 않고 ".module" 클래스로 세 번째 섹션을 모두 강조 표시하는 것입니다.

해결책:

안타깝게도 기본 방법은 없습니다. n번째 유형을 사용하여 이를 달성합니다. 그 이유는 CSS에서 n번째 클래스가 지원되지 않기 때문입니다. 결과적으로 n번째 유형을 클래스로 제한하는 것은 불가능합니다.

대안으로, ".third-module"과 같은 새 클래스를 세 번째 섹션마다 수동으로 추가해야 합니다. ".module" 클래스. 그런 다음 이 사용자 정의 클래스는 n번째 유형을 사용하여 타겟팅할 수 있습니다.

HTML:

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

CSS:

.featured {
  width: 31%;
  margin: 0 0 20px 0;
  padding: 0 3.5% 2em 0;
  float: left;
  background: #ccc;
}

.featured.module.third-module:nth-of-type(3n+3) {
  padding-right: 0;
  background: red;
}

.featured.video {
  width: auto;
  padding: 0 0 2em 0;
  float: none;
}

이 솔루션은 ".third-module" 클래스가 있는 ".module" 섹션만 원하는 항목을 수신하도록 보장합니다. 스타일링은 n번째 유형 선택기에 의해 구체적으로 타겟팅되기 때문입니다.

위 내용은 CSS 'n번째 유형'을 특정 클래스의 요소로 제한할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!