Question

我试图通过FireBug在生成的HTML中查看组件的名称，之后我在JSF项目中手动定义的css中更改它，但无法覆盖PrimeFaces的CSS定义。提前感谢任何想法。

Answer 1

如果使用primefaces 2.2.1，请使用h：outputStylesheet标记并将其包含在h：body中，而不是h：head中，以覆盖primefaces样式表，与h：outputScript相同。

示例：

<h:body>
  <h:outputStylesheet library="css" name="YOURSTYLES.css" />
  <h:outputScript library="javascript" name="YOURSCRIPT.js" target="head" />
</h:body>

如果使用primefaces 3，请关注此博客条目 https://www.primefaces.org/resource-rendering/

Answer 2

添加@Ravi已经回答的内容：

从primefaces 3.0开始，您可以自定义资源的顺序。但是，当我尝试它时，它起初没有工作。

事实证明我无法使用JSF组件来包含这样的css：

<f:facet name="last">
    <h:outputStylesheet library="css" name="bootstrap.css" />
</f:facet>

相反，我不得不使用：

<f:facet name="last">
    <link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.requestContextPath}/resources/css/bootstrap.css" />
</f:facet>

只有这样，订购才开始起作用。

编辑：如果您将facet放入body（而不是head），我的回答是多余的。就像拉维在他的回答中写道的那样。（我一定以某种方式错过了。）

这也不建议这样做，因为FacesServlet不会处理资源，而且css中的路径问题会出现。比较BalusC的answer。

Answer 3

确保您的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&amp;v=3.0-SNAPSHOT" />

<link type="text/css" rel="stylesheet" href="YOURSTYLES.CSS" />

此外，虽然它通常不是首选解决方案，但您可以在样式后添加！important以赋予它们最高优先级：http://www.w3.org/TR/CSS2/cascade.html#important-rules

Answer 4

尝试为替换创建更具体的CSS规则。

最简单的方法是使用仅在您的网页上使用的特定ID预设PrimeFaces CSS定义：

#tuxi_site .ui-widget-content .ui-icon {
   ...
}

在“CSS Specificity: Things You Should Know”文章中了解有关CSS特异性的更多信息。

Answer 5

基本上，您必须使用更明确（更强）的选择器。 CSS越具体，解释器就会给予它更高的重要性。请参阅有关CSS级联顺序的文章：http://www.w3.org/TR/CSS2/cascade.html

或者如果你匆忙：http://ww.boogiejack.com/CSS_4.html

Answer 6

如果要覆盖primefaces.css，可以通过创建空白资源/ primefaces / primefaces.css来实现。它并不完美，但使用Primefaces 5.0

如何覆盖PrimeFaces的样式表？

6 个答案: