如何覆盖Primefaces默认CSS

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

但当我在浏览器中检查时，它在两个地方都显示file1css，我做错了什么？File1.xhtml和File2.xhtml包含在文件3.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未在Web服务器中运行。CSS在web浏览器中运行，在web浏览器解析了从JSF检索到的HTML输出并将其可视化呈现给最终用户之后。

如果你想给一个特定的组件一个不同于默认的样式，那么你应该给它一个类名。

<x:someComponent styleClass="someClass">

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

.ui-menubar.someClass {
     ...
}

（不过更合理地命名它，例如leftMenu、topMenu等）

---

与具体问题无关!important在这里被用作解决方法，而不是解决方案。去掉它，仔细阅读下面的答案，包括它的所有链接，以便学习如何正确地覆盖PrimeFaces默认CSS：如何用自定义样式覆盖默认PrimeFacesCSS？