如何覆盖Primefaces默认CSS? [英] How to Override Primefaces default CSS?

问题描述

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

I am trying to overriding the Primefaces Theme my css look like this in file1.xhtml

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

}

在File2.xhtml中，我使用了此CSS

In File2.xhtml i have used this css

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

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

But when i checked in browser its showing file1 css in both places,what i am doing wrong here? File1.xhtml and File2.xhtml both are in included in File3.xhtml file

查看代码的外观

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

推荐答案

CSS整体应用于HTML文档.您似乎认为CSS不是按每个文件应用的. CSS无法在网络服务器中运行.在Webbrowser解析了从JSF检索到的HTML输出并将其可视化呈现给最终用户之后，CSS在webbrowser中运行.

CSS is applied on the HTML document as whole. CSS is not applied on a per-include-file basis or so as you seem to think. CSS does not run in webserver. CSS runs in webbrowser, after the webbrowser has parsed the HTML output retrieved from JSF and is presenting it visually to the enduser.

如果要为特定组件赋予与默认样式不同的样式，则应为其指定一个类名.

If you want to give a specific component a different style from default, then you should give it a class name.

<x:someComponent styleClass="someClass">

然后您可以在其上微调CSS选择器:

Then you can finetune the CSS selector on that:

.ui-menubar.someClass {
     ...
}

(不过请更合理地命名，例如leftMenu，topMenu等)

无关与具体问题无关，在这里将!important用作解决方法，而不是解决方案.摆脱它，并仔细阅读以下答案，包括所有链接，以了解如何正确覆盖PrimeFaces默认CSS:

Unrelated to the concrete problem, the !important is here being used as a workaround, not as a solution. Get rid of it and carefully read the following answer, including all of its links, in order to learn how to properly override PrimeFaces default CSS: How do I override default PrimeFaces CSS with custom styles?

这篇关于如何覆盖Primefaces默认CSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！