使用 primefaces 3.1 实现自定义 CSS

Question

我正在使用 Primefaces 3.1，我正在尝试为按钮实现自定义 css。

我的页面定义如下：

<h:head>
<title>Primefaces 3.1</title>
<f:facet name="last">             
    <meta http-equiv="X-UA-Compatible" content="EmulateIE8" /> 
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>                           
    <link type="text/css" rel="stylesheet" href="../resources/Styles/stylesheet.css" />
    <link rel="stylesheet" href="../resources/Styles/pfOverride.css" type="text/css" />
    </f:facet> 
</h:head>

CommandButton 如下所示：

<p:commandButton id="button1" styleClass="custButton"....

pfOverride.css 有以下内容：

.ui-button {
    background-color: #b2f5g3;
    border-color: black;    
}

.ui-button-text {
    background-color: #b2f5g3;
.ui-button-text-only .ui-button-text {
    font-size: 9pt; 
    color: black;
}

而且custButton也设置了不同的值，

我的问题是 pfoverride.css 可以正常工作，但样式表不行。有人可以告诉我我遗漏了什么或做错了什么，我也尝试输入!important，但没有运气。

感谢任何帮助。

Answer 1

如果您将右括号添加到 .ui-button-text 并使用正确的十六进制值（g 不是十六进制数字），这应该可以工作：

.ui-button-text {
    background-color: #b2f5f3;
}
.ui-button-text-only .ui-button-text {
    font-size: 9pt; 
    color: black;
}