html – 用CSS表示样式组件类
发布时间:2020-12-14 21:15:24 所属栏目:资源 来源:网络整理
导读:如何使用CSS更改组件的属性? 假设我有两个按钮: p:commandButton id="mySmallButton" styleClass="smallButton"p:commandButton id="myButton" 我希望我的所有按钮都有font-size:14px;所以我添加了这个规则: .ui-button .ui-button-text{ font-size:14px
如何使用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类. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |