2016-09-28 126 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 { height: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>