클래스 접두사를 기반으로 CSS 요소를 어떻게 선택할 수 있습니까?

클래스 접두사를 위한 속성 기반 CSS 선택기

CSS에서 클래스 접두사를 기반으로 요소를 식별하는 것은 어려운 작업일 수 있습니다. 클래스가 "status-"와 같은 특정 접두사로 시작하는 요소에 규칙을 적용하려는 시나리오를 생각해 보세요.

CSS 호환성

안타깝지만, CSS 2.1에는 이 작업에 필요한 선택기가 부족합니다. 그러나 CSS3에는 새로운 가능성을 열어주는 속성 하위 문자열 일치 선택기가 도입되었습니다.

CSS3 속성 선택기

해결할 수 있는 CSS3 속성 선택기 이 도전 are:

• [class^="status-"]: 클래스 속성이 "status-"로 시작하는 요소와 일치합니다.
• [class*=" status-"]: 일치 클래스 속성에 공백 문자 바로 앞에 "status-" 하위 문자열이 포함된 요소입니다. 다른 클래스에서는 일치하지 않도록 공백 문자에 유의하세요.

선택기 조합

원하는 모든 요소를 ​​캡처하려면 다음을 결합해야 합니다. 두 개의 선택기:

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

이 조합은 "status-"로 시작하는 클래스가 있는 요소와 공백 문자 다음에 오는 "status-" 하위 문자열이 모두 선택됩니다.

주의 사항 및 대안

[class*="status-"] 선택기는 다음을 수행할 수 있다는 점을 명심하십시오. HTML에 "foo-status-bar"와 같은 클래스가 포함된 경우 바람직하지 않은 요소와 일치합니다. 이를 방지하려면 그러한 시나리오가 불가능한지 확인하세요.

또는 HTML이나 마크업을 생성하는 애플리케이션을 제어할 수 있는 경우 자체 접두사가 있는 전용 "상태" 클래스를 만드는 것이 더 간단할 수 있습니다. 이렇게 하면 프로세스가 단순화되고 일관성이 보장됩니다.

위 내용은 클래스 접두사를 기반으로 CSS 요소를 어떻게 선택할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!