CSS 선택기가 클래스 접두어를 기반으로 요소를 대상으로 지정할 수 있습니까?

CSS 선택기가 클래스 접두사를 기반으로 요소를 대상으로 지정할 수 있나요?

공유 클래스가 있는 요소에 CSS 규칙을 적용하려는 시나리오에서 접두사, CSS2.1에는 제한 사항이 있습니다. 그러나 CSS3 속성 하위 문자열 일치 선택기가 도입되면서 가능해졌습니다.

이를 달성하려면 다음 속성 선택기를 활용하세요.

• [class^=" status-"]: 다음으로 시작하는 클래스 이름이 있는 요소와 일치합니다. "status-".
• [class*=" status-"]: 공백 문자 바로 뒤에 "status-"가 포함된 클래스 이름이 있는 요소와 일치합니다.

이러한 선택자를 결합하면 여러 클래스가 있는 경우를 포함하여 클래스 속성이 지정된 조건을 충족하는 요소를 대상으로 지정하는 것이 가능해집니다. 현재:

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

위 접근 방식에서는 요소를 "foo-status-bar"와 같은 클래스 속성과 일치시키는 것을 피한다는 점에 유의하는 것이 중요합니다. 이는 바람직하지 않을 수 있습니다.

대체 솔루션에는 다음이 포함될 수 있습니다. 상태 접두어를 별도의 클래스로 명시적으로 포함하도록 jQuery를 사용하거나 HTML 마크업을 재구성합니다. 그러나 CSS3 하위 문자열 일치 선택기는 스타일 규칙에서 클래스 접두사를 처리하는 강력한 CSS 전용 솔루션을 제공합니다.

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