CSS3 `n번째 유형` 선택기를 특정 클래스로 제한하려면 어떻게 해야 합니까?

n번째 유형 CSS 3 선택기를 클래스로 제한

제공된 예에서 볼 수 있듯이 CSS 3의 n번째 유형 선택기는 다음 기반으로 작동합니다. 특정 클래스가 아닌 요소 유형에 대해 설명합니다. 이는 n번째 유형 선택을 특정 클래스로 제한하려는 경우 문제가 될 수 있습니다.

n번째 하위를 사용한 대체 접근 방식

Since n-of- 클래스가 존재하지 않는 경우 대체 솔루션은 nth-child를 사용하는 것입니다. n번째 하위 선택기는 상위 요소의 하위 요소 내 위치에 따라 요소를 선택합니다.

수정된 CSS는 다음과 같습니다.

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

이 수정된 코드에서는 세 번째 n번째 요소를 모두 타겟팅하는 대신 유형의 경우 "모듈" 클래스가 있는 세 번째 하위 요소를 모두 선택합니다. 이 접근 방식은 세 번째 .module 요소마다 스타일을 지정하는 원하는 효과를 얻습니다.

수동 클래스 추가

제공된 솔루션에서 언급한 또 다른 옵션은 수동으로 클래스를 추가하는 것입니다. 세 번째 .module마다 새 클래스가 추가됩니다. 이 접근 방식에는 더 많은 수동 작업이 필요하지만 요소 선택에 대한 더 많은 제어 기능이 제공됩니다.

따라서 CSS를 수정해야 합니다.

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

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