Question

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

假设我有两个按钮：

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

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

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

但我的 smallButton 应该有不同的尺寸，所以我补充道：

.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应该如何拥有我的所有 smallButton 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上运行正常。 Chrome表示，对于ui-button-text embeded span，font-size为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 。我之前尝试过但.smallButton之后有空格，所以它不起作用。现在它正常运作。谢谢你的回答。

Answer 3

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

您可以为此表单定义css：

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

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

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

另见：

使用CSS构造样式组件类

3 个答案: