0

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

1 回答 1

4

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

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

<x:someComponent styleClass="someClass">

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

.ui-menubar.someClass {
     ...
}

（不过，更明智地命名它，例如leftMenu，topMenu等）

与具体问题无关!important，这里被用作解决方法，而不是解决方案。摆脱它并仔细阅读以下答案，包括其所有链接，以了解如何正确覆盖 PrimeFaces 默认 CSS：如何使用自定义样式覆盖默认 PrimeFaces CSS？

于 2013-08-19T02:07:11.110 回答