2016-09-28 16 views
-3

에서 부모와 자식 요소 모두 내가 ...스타일은 CSS를

<a href="#" class="brand-logo"> 
    <img src="../static/images/logo_wpc-sm.png" alt="WPC Logo" class="wpc-logo"/> 
</a> 

그리고이 다음 CSS 코드는 ...

.brand-logo { 
    height: 100%; 
} 
.wpc-logo { 
    height: 100%; 
} 

내 질문에 다음과 같은 구조 않은 : 그것은 방법입니다 하나의 CSS 코드에서 둘 다 스타일을 지정할 수 있습니까?

+1

, 귀하의 경우, 쉼표 분리를 사용하여, 다음과 같이 수행, 또는? '.brand-logo, .wpc-logo { 높이 : 100 %; }' – LGSon

+0

@ LGSon 답을 게시하여 upvote 할 수 있습니다. – Gilbert

+0

또 다른 중복 : [여러 개의 클래스를 하나의 CSS 규칙으로 결합] (http://stackoverflow.com/questions/18215636/combined-multiple-classes-into-one-css-rule) – gfullam

답변

1

동일한 스타일로 클래스 이름을 구분하려면 CSS 선택자 사이에 쉼표 ,을 사용하십시오.

.brand-logo, 
.wpc-logo { 
    height: 100%; 
} 

또는 두 요소 모두에 적용 할 공통 클래스를 만들 수 있습니다.

.common { 
    height: 100%; 
} 
<a href="#" class="brand-logo common"> 
    <img src="../static/images/logo_wpc-sm.png" alt="WPC Logo" class="wpc-logo common"/> 
</a> 
1

속성 선택이 같이

.brand-logo, .wpc-logo { 
 
    color: red; 
 
} 
 

 
[class$='-logo2'] { 
 
    color: blue; 
 
}
<a href="#" class="brand-logo"> 
 
    Red 
 
    <span class="wpc-logo">Logo</span> 
 
</a> 
 

 
<hr> 
 

 
<a href="#" class="brand-logo2"> 
 
    Blue 
 
    <span class="wpc-logo2">Logo</span> 
 
</a>