Primefaces使用CSS设计组件类 [英] Primefaces styling component class with CSS

查看:90
本文介绍了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设计组件类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆