[css] 여러 클래스를 기반으로 요소 선택

Program / 글쓴이

태그가 두 개일 때 태그에 적용하려는 스타일 규칙이 있습니다 클래스 있습니다. JavaScript없이 이것을 수행 할 수있는 방법이 있습니까? 다시 말해:

<li class='left ui-class-selector'>

및 클래스 가 모두 적용된 경우 에만 스타일 규칙을 적용하고 싶습니다 .li.left.ui-class-selector

답변

두 개의 수업을 의미합니까? 선택기 “체인”(공백 없음) :

.class1.class2 {
    /* style here */
}

모든 요소를이 선택 class1이 또한있다 class2.

귀하의 경우 :

li.left.ui-class-selector {

}

공식 문서 : CSS2 클래스 선택기 .

로 akamike :이 부분을 읽어보십시오 Internet Explorer 6에서이 방법에 문제가 지적 IE6의 CSS에서 사용 더블 클래스?

답변

체인 선택기는 클래스에만 국한되지 않으며 클래스와 ID 모두에 대해 수행 할 수 있습니다.

클래스

.classA.classB {
/*style here*/
}

수업 및 ID

.classA#idB {
/*style here*/
}

ID 및 ID

#idA#idB {
/*style here*/
}

IE 6을 제외한 모든 최신 브라우저는 이것을 지원하며 목록의 마지막 선택기를 기반으로 선택합니다. 따라서 “.classA.classB”는 “.classB”만을 기준으로 선택합니다.

당신의 경우를 위해

li.left.ui-class-selector {
/*style here*/
}

또는

.left.ui-class-selector {
/*style here*/
}

답변

다음 솔루션을 사용할 수 있습니다.

CSS 규칙은 다음 두 클래스가있는 모든 태그에 적용됩니다.

.left.ui-class-selector {
    /*style here*/
}

CSS 규칙 <li>은 다음 두 클래스 가 있는 모든 태그에 적용됩니다 .

li.left.ui-class-selector {
   /*style here*/
}

jQuery 솔루션 : 

$("li.left.ui-class-selector").css("color", "red");

자바 스크립트 솔루션 : 

document.querySelector("li.left.ui-class-selector").style.color = "red";

답변