CSS 如何覆盖 PrimeFaces 的样式表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8578494/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to override stylesheets of PrimeFaces?
提问by merveotesi
Simply i tried to look the name of a component in generated HTML through FireBug after that i change it in my manually defined css in JSF project, but could not override the PrimeFaces' CSS definition. Thanks in advance for any idea.
只是我尝试通过 FireBug 在生成的 HTML 中查看组件的名称，然后我在 JSF 项目中手动定义的 css 中更改它，但无法覆盖 PrimeFaces 的 CSS 定义。提前感谢您的任何想法。
回答by Ravi Kadaboina
If using primefaces 2.2.1, Use the h:outputStylesheet tag and include it in h:body not in h:head to override primefaces stylesheets, same with h:outputScript.
如果使用 primefaces 2.2.1，请使用 h:outputStylesheet 标记并将其包含在 h:body 中而不是 h:head 中以覆盖 primefaces 样式表，与 h:outputScript 相同。
Example:
例子：
<h:body>
<h:outputStylesheet library="css" name="YOURSTYLES.css" />
<h:outputScript library="javascript" name="YOURSCRIPT.js" target="head" />
</h:body>
If using primefaces 3, follow this blog entry https://www.primefaces.org/resource-rendering/
如果使用 primefaces 3，请遵循此博客条目 https://www.primefaces.org/resource-rendering/
回答by Jens
Adding to what @Ravi already answered:
添加到@Ravi 已经回答的内容：
From primefaces 3.0 on you can customize the order of the resources. However when I tried that it was not working at first.
从 primefaces 3.0 开始，您可以自定义资源的顺序。但是，当我尝试它时，它起初不起作用。
It turned out that I could not use the JSF component to include css like this:
事实证明，我无法使用 JSF 组件来包含这样的 css：
<f:facet name="last">
<h:outputStylesheet library="css" name="bootstrap.css" />
</f:facet>
Instead I had to use:
相反，我不得不使用：
<f:facet name="last">
<link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.requestContextPath}/resources/css/bootstrap.css" />
</f:facet>
Only then the ordering started to work.
直到那时，订购才开始起作用。
EDIT: My answer is superfluous if you put the facetinto the body(instead of head). Just like Ravi wrote in his answer. (I must have missed that somehow.)
编辑：如果您将facet放入body（而不是head）中，我的回答是多余的。就像拉维在他的回答中所写的那样。（我一定以某种方式错过了。）
It also not advisable to do this because then the resources are not processed by the FacesServletand problems with paths inside of css can come up. Compare this answerfrom BalusC.
也不建议这样做，因为这样资源就不会被FacesServletcss处理，并且可能会出现 css 内部路径的问题。比较BalusC 的这个答案。
回答by Gregg B
Make sure your CSS file link comes after the PrimeFaces file in your code.
确保您的 CSS 文件链接位于代码中的 PrimeFaces 文件之后。
<link type="text/css" rel="stylesheet" href="/showcase-labs/javax.faces.resource/theme.css.jsf?ln=primefaces-aristo" />
<link type="text/css" rel="stylesheet" href="/showcase-labs/javax.faces.resource/primefaces.css.jsf?ln=primefaces&v=3.0-SNAPSHOT" />
<link type="text/css" rel="stylesheet" href="YOURSTYLES.CSS" />
In addition, while it is not generallythe preferred solution you can add !important after your styles to give them the highest priority: http://www.w3.org/TR/CSS2/cascade.html#important-rules
此外，虽然它通常不是首选解决方案，但您可以在样式后添加 !important 以赋予它们最高优先级：http: //www.w3.org/TR/CSS2/cascade.html#important-rules
回答by Michal Puzanov
If you want to override primefaces.css, you can do it by creating blank resouces/primefaces/primefaces.css . It's not perfect but working with Primefaces 5.0
如果你想覆盖 primefaces.css，你可以通过创建空白 resouces/primefaces/primefaces.css 来实现。它并不完美，但适用于 Primefaces 5.0
回答by yatskevich
Try to create more specific CSS rules for your overrides.
尝试为您的覆盖创建更具体的 CSS 规则。
The easiest way is to prepend PrimeFaces CSS definitions by a specific id which is used only on your pages:
最简单的方法是通过仅在您的页面上使用的特定 id 来添加 PrimeFaces CSS 定义：
#tuxi_site .ui-widget-content .ui-icon {
...
}
Read more about CSS Specificity in "CSS Specificity: Things You Should Know" article.
在“ CSS 特异性：你应该知道的事情”一文中阅读更多关于 CSS 特异性的信息。
回答by Authman Apatira
Basically, you have to use a more well defined (stronger) selector. The more specific your CSS is, the higher importance the interpreter will grant to it. Please see this article on CSS Cascading Order: http://www.w3.org/TR/CSS2/cascade.html
基本上，您必须使用定义更明确（更强）的选择器。你的 CSS 越具体，解释器赋予它的重要性就越高。请参阅有关 CSS 级联顺序的这篇文章：http: //www.w3.org/TR/CSS2/cascade.html
Or if you are in a rush: http://ww.boogieHyman.com/CSS_4.html
或者，如果您赶时间：http: //ww.boogieHyman.com/CSS_4.html
