ネストされたコンポーネントに影響を及ぼすPrimeNG用のカスタムCSS

Question

現在、PrimeNGを使用している角度アプリのCSSをカスタマイズしています。ヘッダーの色を赤色に変更したパネルがあります。ただし、このパネル内のネストされたパネルでも、ヘッダーが赤に変更されます。これは予想される動作ですか？デフォルトの色は灰色です - これらのネストされたパネルヘッダーも灰色で表示されることが予想されました。

私のCSSは簡単です：

.redColoredPanel .ui-panel-titlebar { 
    background-color: red 
} 

と私はこのような私のパネルの作成：に私のCSSを変更

<p-panel styleClass="redColoredPanel" header="Panel Header" [collapsed]="true" [toggleable]="true"> 

    <!--I expect this nested panel's header to be the default, 
    but the 'redColoredPanel' class is applied to it as well.--> 
    <p-panel header="Actions" [collapsed]="true" [toggleable]="true"><p-panel> 

<p-panel> 

Answer 1

を：

.redColoredPanel > .ui-panel-titlebar { 
    background-color: red 
} 

は私の問題を解決しました。参考のため

：What does the ">" (greater-than sign) CSS selector mean?