使用 CSS 的 Primefaces 样式组件类 [英] Primefaces styling component class with CSS

问题描述

如何使用 CSS 更改组件的属性?

How can I change properties of component using CSS?

假设我有两个按钮:

<p:commandButton id="mySmallButton" styleClass="smallButton">
<p:commandButton id="myButton">

我希望我所有的按钮都有 font-size: 14px; 所以我添加了这个规则:

I want all my buttons to have font-size: 14px; so I added this rule:

.ui-button .ui-button-text{
   font-size:14px;
}

但是我的 smallButton 应该有不同的大小，所以我补充说:

But my smallButton should have different size, so I added:

.smallButton{
   font-size:11px;
}

不幸的是，这不起作用.这是生成的 HTML:

Unfortunatelly this doesn't work. This is produced 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>

此按钮上的文本大小仍为 14 像素.CSS 应该如何拥有我所有的 smallButton font-size: 11px ?

The text on this button is stil 14px size. How should CSS look like to have all my smallButton font-size: 11px ?

推荐答案

我找到了问题的解决方案.我只需要这个:

I found the solution to my problem. All I need is this:

.smallButton.ui-button-text-only .ui-button-text {
    font-size: 11px;
}

所以现在ui-button-text-only .ui-button-text 只适用于smallButton.我之前尝试过，但在 .smallButton 之后有空格，所以它不起作用.现在它工作正常.感谢您的回答.

So now ui-button-text-only .ui-button-text only apply to the smallButton. I tried it before but with space after .smallButton so it didn't work. Now it is working properly. Thanks for your answers.

这篇关于使用 CSS 的 Primefaces 样式组件类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！