CSS에 여러 클래스가있는 요소를 쿼리하는 방법이 있습니까?

Question

두 클래스가 동시에있는 요소를 어떻게 쿼리합니까? 예를 들어

:

나는 동시에 "주요"와 "작은"수업이있는 모든 스팬 스타일을 원하는

<div><span class="major minor">Test</span></div> 

.

Answer 1

다음은 트릭을해야 다음 : 당신이

span.major.minor { color: red; } 

참고 인터넷 익스플로러 6이 조심해야 할 - 그것은 단지 선택의 마지막 클래스를 읽을 것이다. 예를 들어, 잘못 다음 위의 규칙을 적용합니다 :

<span class="minor">Test</span> 

Answer 2

는 : 두 번

.major.minor { ... } 

그러나을 예를 클래스 한정자를 사용합니다. IE6 (또는 Quirks Mode에있는 경우 IE7)에서 작동하지 않습니다. 동일한 요소에 여러 클래스 선택기를 지정하면 IE는 마지막 클래스에만주의를 기울입니다. 따라서 위의 선택기는 class="minor" 인 요소와 일치합니다.

해결 방법은 하나의 클래스로 여러 클래스 중복 포함 :

.major-minor { ... } 
<span class="major minor major-minor">...</span> 

또는 예비 요소가 깨끗 봉쇄 만들기 위해 사용할 수있는 경우 :!

.major .minor { ... } 
<span class="major"><span class="minor">...</span></span>