Primefaces 样式组件类与 CSS 一起

Question

如何使用CSS更改组件的属性？

假设我有两个按钮：

<p:commandButton id="mySmallButton" styleClass="smallButton">
<p:commandButton id="myButton">

我希望我所有的按钮都有font-size: 14px;所以我添加了这个规则：

.ui-button .ui-button-text{
   font-size:14px;
}

但是我的小按钮应该有不同的大小，所以我补充说：

.smallButton{
   font-size:11px;
}

不幸的是，这不起作用。这是生成的 HTML：

<button class="ui-button ui-widget ui-state-default ui-corner-all
    ui-button-text-only smallButton" (...)>
    <span class="ui-button-text ui-c">MY TEXT</span>
</button>

此按钮上的文本大小为 14px。CSS应该是什么样子，让我所有的小按钮font-size: 11px？

Answer 1

您的问题与所有 CSS 的加载顺序有关。CSS 是级联样式表。因此，如果您希望应用.smallButton样式，它必须是 css 链中的最后一个样式，以便覆盖任何以前的匹配样式。

检查 CSS 的顺序（请参阅浏览器中生成的源标头）

如果您希望您的 CSS 是最后一个，您可以在页面或模板中使用它：

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

这样可以避免过度使用!important标签，这两者都有效。

编辑

这对我来说在铬上工作正常。Chrome表示，ui-button-text嵌入span的字体大小为11px，并显示第一个按钮小于第二个按钮，字体大小为14px。

<style>
.ui-button-text{
   font-size:14px;
}
.smallButton .ui-button-text {
   font-size:11px;
}
</style>
<p:commandButton id="mySmallButton" styleClass="smallButton"/>
<p:commandButton id="myButton"/>

另外，请注意，生成的 html 按钮没有任何ui-button类。

Answer 2

我找到了解决问题的方法。我所需要的只是这个：

.smallButton.ui-button-text-only .ui-button-text {
    font-size: 11px;
}

所以现在ui-button-text-only .ui-button-text只适用于小按钮。我之前试过，但.smallButton后有空间，所以它不起作用。现在它工作正常。感谢您的回答。

Answer 3

PrimeFaces 使用父表单的默认规则覆盖您的 css。

您可以像这样为表单定义 css：

form .smallButton{
   font-size:11px;
}

或者您可以使用 !important 关键字：

.smallButton{
   font-size:11px !important;
}

另请参阅：

• PrimeFaces：如何覆盖CSS类
• PrimeFaces 覆盖了我的自定义 CSS 样式