접두사를 기반으로 CSS 클래스를 효율적으로 일치시키려면 어떻게 해야 합니까?

클래스 접두사 일치를 위한 CSS 선택기

특정 클래스 접두사를 기반으로 CSS 규칙 적용을 달성하는 것은 어려울 수 있습니다. CSS 2.1에는 이러한 기능이 없지만 CSS3에서는 속성 하위 문자열 일치 선택기가 있는 솔루션을 제공합니다.

CSS3 솔루션:

CSS3에서는 [class^="prefix-" ] 및 [class*=" prefix-"] 선택기. 전자는 클래스 속성이 "prefix-"로 시작하는 요소와 일치하고, 후자는 공백 문자 뒤에 "prefix-"가 포함된 요소와 일치합니다.

div[class^="status-"], div[class*=" status-"]

이 조합을 사용하면 클래스 속성이 두 조건 중 하나를 충족하는 요소에 대한 일치가 보장됩니다. . 두 번째 선택기에서 공백 문자를 사용하면 "status-bar"와 같은 클래스 이름을 가진 요소가 일치하지 않습니다. 그러나 여러 클래스가 지정되거나 속성 값의 공백 여백을 고려하는 경우 후속 클래스를 효과적으로 확인합니다.

강건성:

[class= 사용에 유의하세요. "status-"] 단독으로는 "foo-status-bar"와 같은 클래스 이름을 가진 요소와 같이 원하지 않는 일치가 발생할 수 있습니다. [class^="status-"]와 [class=" status-"]의 조합은 더 큰 견고성을 제공합니다.

대체 접근 방식:

If 가능하다면 CSS 규칙을 단순화하기 위해 상태 접두사가 있는 전용 클래스를 만드는 것을 고려해 보세요. 이 접근 방식을 사용하면 복잡한 속성 선택기가 필요하지 않습니다.

위 내용은 접두사를 기반으로 CSS 클래스를 효율적으로 일치시키려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!