如何覆盖 Primefaces 默认 CSS？答案

【问题标题】：How to Override Primefaces default CSS?如何覆盖 Primefaces 默认 CSS？
【发布时间】：2013-08-18 06:15:41
【问题描述】：

我正在尝试覆盖 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>

【问题讨论】：

您能否提供一个无法正常工作的 xhtml 文件的基本示例？
我在一个 layoutunit 中使用了两个 xhtml

标签： jsf primefaces

【解决方案1】：

CSS 应用于整个 HTML 文档。 CSS 不是在每个包含文件的基础上应用的，或者您似乎认为的那样。 CSS 不在网络服务器中运行。 CSS 在 webbrowser 中运行，在 webbrowser 解析了从 JSF 检索到的 HTML 输出并将其直观地呈现给最终用户之后。

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

<x:someComponent styleClass="someClass">

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

.ui-menubar.someClass {
     ...
}

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

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

【讨论】：

不惜一切代价避免!important。
@Mindwin：另请参阅答案底部的链接以获取指导。
@BalusC 我正在尝试根据您的建议 '.ui-button-text .headerButton{...}' 并在组件中添加了 'styleClass="headerButton"' 但它没有用我写过像我为 '.ui-button-text' 做的所有按钮 css 那么它会起作用吗？
删除.ui-button-text和.headerButton之间的空格。再看看我的回答，我强烈建议独立于 JSF 开始单独学习 CSS。