2 개의 클래스가있는 경우에만 CSS로 요소를 대상으로 할 수 있습니까?

StackOverflow https://stackoverflow.com/questions/640996

  •  22-07-2019
  •  | 
  •  

문제

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

예시

<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>

내가 먼저 얻는 데 사용하는 CSS 선택기 div 만 (내가 사용할 수 없다고 가정합니다 .content:first-child 또는 유사한)?

도움이 되었습니까?

해결책

예, 그냥 연결하십시오. .content.main. 보다 CSS 클래스 선택기.

그러나 버전 6까지 인터넷 익스플로러는 여러 클래스 선택기를 지원하지 않으며 마지막 클래스 이름을 존중합니다.

다른 팁

그것을 위해서 (정말로 이것을하는 것이 좋지 않습니다) ~이다 그것을하는 또 다른 방법 :

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

또는:

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

참조: http://www.w3.org/tr/css2/selector.html

e [foo ~ = "경고"]는 "foo"속성 값인 e 요소와 일치합니다. 공간 분리 된 값, 그 중 하나는 "경고"와 정확히 동일합니다.

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

이것이 실제로 유용한 이유 (적어도 IE6의 경우) :

IE6은 여러 클래스를 지원하지 않기 때문에 사용할 수 없습니다. .content.main, 하지만 JavaScript 라이브러리가 있습니다 IE-7.JS 이를 통해 속성 선택기는 가능하지만 여러 클래스에 있어서도 여전히 실패하는 것 같습니다. 속성 선택기를 가능하게하는 JavaScript를 사용하여 IE6 에서이 해결 방법을 테스트했지만 추악하지만 작동합니다.

IE6이 여러 클래스 선택기를 지원하는 스크립트를 아직 찾지 못했지만 속성 선택기를 활성화하는 많은 것을 발견했습니다. 누군가가 알고 있다면 작동합니다,이 해결 방법을 제거 할 수 있도록 의견을 외쳐주세요.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top