ProgramingTip

2 개의 클래스가 경우에만 CSS로 요소를 사용할 수 있습니까?

bestdevel 2020. 10. 12. 07:53
반응형

2 개의 클래스가 경우에만 CSS로 요소를 사용할 수 있습니까?


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

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

-th 첫 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에서 여러 클래스 선택기를 지원하도록 만드는 펼쳐를 아직 찾지 못했지만 속성 선택기를 활성화하는 것을 찾았습니다. 누군가가 작동하는 것을 알고있는 사람 이 해결 방법을 제거 할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/640996/can-you-target-an-element-with-css-only-if-2-classes-are-present

반응형