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

접두사 기반 CSS 클래스 선택이 가능한가요?

웹 개발 영역에서는 CSS 기반 요소에 CSS 규칙을 적용해야 하는 경우가 많습니다. 특정 클래스 접두사에 대해. 예를 들어 클래스가 "status-" 접두사로 시작하는 요소를 타겟팅할 수 있습니다.

CSS2.1에서는 할 수 없습니다

안타깝게도 CSS2 .1은 접두사 기반 클래스 선택을 달성하는 직접적인 방법을 제공하지 않습니다. 그러나 CSS3 속성 하위 문자열 일치 선택기가 도움이 됩니다.

CSS3을 사용한 접두사 기반 선택

CSS3에는 도움이 될 수 있는 두 가지 속성 선택기가 도입되었습니다.

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

분석 선택기:

• [class^="status-"] - 클래스 속성이 "status-"로 시작하는 요소와 일치합니다.
• [class*=" status-" ] - 공백으로 구분된 문자열 내에서 클래스 속성에 "status-"가 포함된 요소와 일치합니다.

이 두 가지를 결합합니다. 선택기는 공백으로 구분된 여러 클래스가 있는 요소까지 포함하여 모든 적절한 요소를 포착하도록 보장합니다.

또 다른 문제

단순히 [class*="status-"를 사용한다는 점에 유의하세요. ]는 다음과 같은 요소와도 일치할 수 있습니다.

<div>
<p>이를 방지하려면 표시된 대로 두 선택기를 결합하는 것이 가장 좋습니다. </p>
<p><strong>기타 옵션</strong></p>
<p>HTML 마크업을 제어할 수 있는 경우 더 간단한 접근 방식은 상태 접두어를 다음과 같은 자체 클래스로 분리하는 것입니다.</p>
<pre class="brush:php;toolbar:false"><div><p>[class="status-important"]를 사용하여 요소를 타겟팅할 수 있습니다.</p></div>