CSS

Question

で親と子の両方の要素は、私は次のような構造を持っているスタイル...

<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%; 
} 

私の質問：それは方法です私は両方の1つのCSSコードでスタイルすることができますか？

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

Answer 2

コンマ分離、または、あなたのケースでは、属性セレクタこのよう

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