PrimeNG 的自定义 CSS 影响嵌套组件答案

【问题标题】：Custom CSS for PrimeNG affecting nested componentsPrimeNG 的自定义 CSS 影响嵌套组件
【发布时间】：2017-07-19 04:25:55
【问题描述】：

我目前正在自定义使用 PrimeNG 的 Angular 应用的 CSS。我有一个面板，我已将标题颜色更改为红色。但是，此面板中的任何嵌套面板也将其标题更改为红色。这是预期的行为吗？默认颜色是灰色 - 我希望那些嵌套的面板标题也显示为灰色。

我的 css 很简单：

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

然后我像这样创建我的面板：

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

【问题讨论】：

你甚至可以在前面添加选择器
请点击你所有的标签，阅读描述，你真的都用了吗？
移除 PrimeFaces 标签。

标签： html css angular primeng

【解决方案1】：

将我的 css 更改为：

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

解决了我的问题。

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

【讨论】：