Primefaces使用CSS设计组件类

问题描述

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

假设我有两个按钮：

 < p：commandButton id =mySmallButtonstyleClass =smallButton> 
< p：commandButton id =myButton> 
  

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

  .ui-button .ui-button-text {
字体大小：14px的; 
} 
  

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

  .smallButton {
 font-size：11px; 
} 
  

不幸的是，这不起作用。这是HTML生成的：

 < button class =ui-button ui-widget ui-state-default ui-corner-全部
 ui-button-text-only smallButton（...）> 
< span class =ui-button-text ui-c>个人文本< / span> 
< / button> 
  

此按钮上的文字为stil 14px大小。 CSS应该如何拥有我所有的 smallButton font-size：11px ？

解决方案

我找到了解决我的问题的方法。所有我nedd是这样的：

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

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

How can I change properties of component using 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:

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

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

.smallButton{
   font-size:11px;
}

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>

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

解决方案

I found solution to my problem. All I nedd is this:

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

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 answerws.

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