CSS `n번째 유형`을 사용하여 위치와 클래스를 모두 기반으로 요소를 선택하려면 어떻게 해야 합니까?

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

CSS 3의 n번째 유형 선택기를 사용하면 개발자가 기반으로 요소를 선택할 수 있습니다. 형제자매 집단 내에서 자신의 위치에 대해. 그러나 현재 클래스에 따라 요소를 선택하는 데에는 제한이 있습니다.

구체적으로 nth-of-type은 요소의 위치를 ​​결정할 때 클래스에 상관없이 모든 형제 요소를 고려합니다. 즉, 특정 클래스가 있는 세 번째 요소를 모두 선택하려는 경우 n번째 유형만으로는 이를 달성할 수 없습니다.

예를 들어 제공된 HTML에서 클래스가 있는 세 번째 요소를 모두 선택하려고 합니다. ".기준 치수". 그러나 ".featured.module:nth-of-type(3n 3)"을 사용하면 ".featured.video" 요소도 전체적으로 세 번째 형제 요소이므로 선택됩니다.

해결책

안타깝게도 CSS의 현재 제한 사항에 따라 n번째 유형을 다음으로 제한할 수 있는 직접적인 방법은 없습니다. 특정 수업. 해결 방법으로 ".module3" 또는 ".module6"과 같은 고유 클래스를 세 번째 ".module" 요소마다 수동으로 추가하는 것을 고려할 수 있습니다. 이렇게 하면 대신 n번째 유형을 사용하여 고유한 클래스를 기반으로 선택할 수 있습니다.

참고: nth-of-class는 CSS 3에서 유효한 선택자가 아닙니다. 솔루션으로 활용이 불가능한 이유.

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