html – 用CSS表示样式组件类

概述如何使用CSS更改组件的属性？ 假设我有两个按钮： <p:commandButton id="mySmallButton" styleClass="smallButton"><p:commandButton id="myButton"> 我希望我的所有按钮都有font-size：14px;所以我添加了这个规则： .ui-button .ui-button-text{ font-size:1 如何使用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  (...)>    <span >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类.

总结

以上是内存溢出为你收集整理的html – 用CSS表示样式组件类全部内容，希望文章能够帮你解决html – 用CSS表示样式组件类所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。