클래스 .a 및 클래스 .B가있는 요소에 대한 CSS 선택기

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

  •  03-07-2019
  •  | 
  •  

문제

두 클래스가있는 요소를 스타일링해야합니다. .a 그리고 수업 .b. 어떻게해야하나요?

클래스가 HTML에 나타나는 순서는 다를 수 있습니다.

<style>
    div.a ? div.b {
        color:#f00;
    }
</style>
<div class="a">text not red</div>
<div class="b">text not red</div>
<div class="a b">red text</div>
<div class="b a">red text</div>
도움이 되었습니까?

해결책

그것은 전적으로 가능합니다. 요소에 두 개의 클래스를 지정하는 경우 (공백이없는) 규칙이 적용해야합니다.

div.a {
  color: blue;
}
div.b {
  color: green;
}
div.a.b {
  color: red;
}
<div class="a">
  A
</div>
<div class="b">
  B
</div>
<div class="a b">
  AB
</div>

다른 팁

클래스 선택기를 결합 할 수 있습니다.

div.a.b {
  color: red;
}

인용 사양:

"클래스"값의 하위 집합에 맞추려면 각 값은 ""가 선행되어야합니다. ".

예를 들어, 다음 규칙은 "클래스"속성이 "목회"및 "마린"을 포함하는 공간 구분 값 목록에 할당 된 P 요소와 일치합니다.

p.marine.pastoral { color: green }

이 규칙은 언제 일치합니다 class="pastoral blue aqua marine" 그러나 일치하지 않습니다 class="pastoral blue". 

div[class~="a"][class~="b"]{
color:#f00;
}

/ * 클래스 A와 B가 함께있는 DIV 태그 선택 */

 <style>
    div.a.b
    { 
         color:#f00;
    }
    </style>
    <div class="a">text not red</div>
    <div class="b">text not red</div>
    <div class="a b">red text</div>
    <div class="b a">red text</div>

예, 콘텐츠가 동적으로 변경되면 공통 클래스를 사용하거나 JavaScript를 사용하지 마십시오.

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