使用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应该有不同的大小,所以我补充说:

.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的字体大小为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所以它不起作用。现在它可以正常工作了。感谢您的回答。