Question

我正在尝试覆盖 Primefaces 主题我的 css 在 file1.xhtml

中看起来像这样

.ui-menubar {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px!important;
    background: #D4C5F7!important;

}

在File2.xhtml中我使用了这个css

.ui-menubar {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    background: #557FFF!important;
}

但是当我在浏览器中检查它在两个地方显示 file1 css时，我在这里做错了什么？ File1.xhtml 和 File2.xhtml 都包含在 File3.xhtml 文件中

查看代码的外观

<p:layoutUnit position="north" size="100" id="north"
                resizable="false" closable="false" style="border:none">
                <ui:insert name="north">

                    <ui:include src="/template/top_header.xhtml" />

                    <ui:include src="/template/header_menu.xhtml" />
                </ui:insert>
        </p:layoutUnit>

Answer 1

CSS整体应用于HTML文档。 CSS似乎不是基于每个包含文件应用的，或者您似乎认为。 CSS不在webserver中运行。在webbrowser解析了从JSF检索到的HTML输出并将其可视化地呈现给最终用户之后，CSS在webbrowser中运行。

如果要为特定组件提供与默认设置不同的样式，则应为其指定类名。

<x:someComponent styleClass="someClass">

然后你可以微调CSS选择器：

.ui-menubar.someClass {
     ...
}

（但更明智地命名，例如leftMenu，topMenu等）

对具体问题

无关，此处!important被用作解决方法，而不是解决方案。摆脱它并仔细阅读以下答案，包括其所有链接，以了解如何正确覆盖PrimeFaces默认CSS：How do I override default PrimeFaces CSS with custom styles?

如何覆盖Primefaces默认的CSS？

1 个答案: