如何覆盖 PrimeFaces 的样式表？ [复制]答案

【问题标题】：How to override stylesheets of PrimeFaces? [duplicate]如何覆盖 PrimeFaces 的样式表？ [复制]
【发布时间】：2012-01-24 14:18:47
【问题描述】：

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

【问题讨论】：

标签： css jsf primefaces

【解决方案1】：

【解决方案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。

【讨论】：

谢谢，成功了。在此期间，您是否找到了使用 h:outputStylesheet 执行此操作的方法？
不，我没有再调查过。
@DominikObermaier：我编辑了我的答案。您可以使用h:outputStylesheet，但您必须将其放入body。
对我来说，当我使用时，我不得不使用 JSF 格式的 css 包含。不像

【解决方案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

【讨论】：

感谢回复，但没有像在我的项目中。即使我搜索了

【解决方案4】：

尝试为您的覆盖创建更具体的 CSS 规则。

最简单的方法是在 PrimeFaces CSS 定义之前添加一个特定的 ID，该 ID 仅在您的页面上使用：

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

在“CSS Specificity: Things You Should Know”文章中阅读有关 CSS 特定性的更多信息。

【讨论】：

【解决方案5】：

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

或者如果你赶时间：http://ww.boogiejack.com/CSS_4.html

【讨论】：

【解决方案6】：

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

【讨论】：