Question

我目前正在自定义使用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>

Answer 1

将我的CSS更改为：

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

解决了我的问题。

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

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

1 个答案: