[css] 2 개의 클래스가있는 경우에만 CSS로 요소를 타겟팅 할 수 있습니까?

Program / 글쓴이

이미 알고 있듯이 공백으로 구분 된 요소에 여러 클래스가있을 수 있습니다.

예

<div class="content main"></div>

CSS를 div사용하면 .content또는 .main. 두 클래스가 모두 존재 하는 경우 에만 대상을 지정하는 방법 이 있습니까?

예

<div class="content main">I want this div</div>
<div class="content">I don't care about this one</div>
<div class="main">I don't want this</div>

첫 번째 div만 가져 오려면 어떤 CSS 선택기를 사용해야합니까 (사용할 수 .content:first-child없거나 유사 하다고 가정 )?

답변

예, 연결하기 만하면 .content.main됩니다.. CSS 클래스 선택기를 참조하십시오 .

그러나 Internet Explorer 버전 6까지는 여러 클래스 선택기를 지원하지 않고 마지막 클래스 이름 만 사용합니다.

답변

그냥 위해서 (난 정말이 작업을 수행하지 않는 것이 좋습니다)을 위해, 거기에 있다 그것을 할 수있는 또 다른 방법은 :

.content[class~="main"] {}

또는:

.main[class~="content"] {}

참조 : http://www.w3.org/TR/CSS2/selector.html

E [foo ~ = “warning”] “foo”속성 값이 공백으로 구분 된 값 목록 인 모든 E 요소와 일치 하며 그 중 하나는 “warning”과 정확히 동일합니다.

데모 : http://jsfiddle.net/eXrSg/

이것이 실제로 유용한 이유 (최소한 IE6의 경우) :

IE6는 여러 클래스를 지원하지 않기 때문에, 우리는 사용할 수 없습니다 .content.main, 하지만 같은 일부 자바 스크립트 라이브러리가 IE-7.js 속성 선택을 가능하게하지만 여러 클래스에 올 때 실패 할 것으로 보인다. 속성 선택기를 활성화하는 자바 스크립트를 사용하여 IE6 에서이 해결 방법을 테스트했으며 추악하지만 작동합니다.

IE6에서 여러 클래스 선택기를 지원하도록 만드는 스크립트를 아직 찾지 못했지만 속성 선택기를 활성화하는 많은 것을 찾았습니다. 누군가가 작동하는 것을 알고 있다면 이 해결 방법을 제거 할 수 있도록 의견에 소리를 지르십시오.

답변