Html 使用 CSS 的 Primefaces 样式组件类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20923843/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Primefaces styling component class with CSS
提问by Demiurg
How can I change properties of component using CSS?
如何使用 CSS 更改组件的属性？
Let's say I have two buttons:
假设我有两个按钮：
<p:commandButton id="mySmallButton" styleClass="smallButton">
<p:commandButton id="myButton">
I want all my buttons to have font-size: 14px;so I added this rule:
我希望我的所有按钮都有，font-size: 14px;所以我添加了这个规则：
.ui-button .ui-button-text{
font-size:14px;
}
But my smallButtonshould have different size, so I added:
但是我的smallButton应该有不同的大小，所以我补充说：
.smallButton{
font-size:11px;
}
Unfortunatelly this doesn't work. This is produced HTML:
不幸的是，这不起作用。这是生成的 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>
The text on this button is stil 14px size. How should CSS look like to have all my smallButtonfont-size: 11px?
这个按钮上的文字仍然是 14px 大小。CSS 应该如何拥有我所有的smallButtonfont-size: 11px？
采纳答案by Demiurg
I found solution to my problem. All I nedd is this:
我找到了解决我的问题的方法。所有我nedd是这样的：
.smallButton.ui-button-text-only .ui-button-text {
font-size: 11px;
}
So now ui-button-text-only .ui-button-textonly apply to the smallButton. I tried it before but with space after .smallButtonso it didn't work. Now it is working properly. Thanks for your answerws.
所以现在ui-button-text-only .ui-button-text只适用于smallButton。我之前尝试过，但之后有空间，.smallButton所以它不起作用。现在它工作正常。感谢您的回答。
回答by Stephane Lallemagne
Your problem is related to the loading order of all the CSS. CSS are cascadingstyle sheets. So if you want your .smallButtonstyle to be applied, it must be the last in the css chain, in order to override any previous matching styles.
您的问题与所有 CSS 的加载顺序有关。CSS 是级联样式表。因此，如果您希望应用您的.smallButton样式，它必须是 css 链中的最后一个，以便覆盖任何先前匹配的样式。
Check the order of the CSS (see generated source header in your browser)
检查 CSS 的顺序（请参阅浏览器中生成的源标题）
If you want your CSS to be the last one, you can use this inside your page or template:
如果你想让你的 CSS 成为最后一个，你可以在你的页面或模板中使用它：
<f:facet name="last">
<h:outputStylesheet library="default" name="css/yourstyles.css" />
</f:facet>
This avoids overuse of !importanttag, that works either.
这可以避免过度使用!important标签，这也可以。
EDIT
编辑
This works fine for me on chrome. Chrome says font-size is 11px for ui-button-text embeded span, and displays the first button smaller than the second one, which font-size is 14px.
这对我来说在 chrome 上很好用。Chrome 表示 ui-button-text embeded span 的 font-size 为 11px，并显示第一个按钮小于第二个，其 font-size 为 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"/>
Also, please notice that the generated html buttons do not have any ui-buttonclass.
另外，请注意生成的 html 按钮没有任何ui-button类。
回答by unwichtich
PrimeFaces overrides your css with the default rules for the parent form.
PrimeFaces 使用父表单的默认规则覆盖您的 css。
You can define your css for the form like this:
您可以像这样为表单定义 css：
form .smallButton{
font-size:11px;
}
or you can use the !importantkeyword:
或者您可以使用!important关键字：
.smallButton{
font-size:11px !important;
}
See also:
也可以看看：
