如何使用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字体大小：11px？
解决方法
您的问题与所有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类.
