Richfaces Skin Overriding Styleclass

Question

我有一个JSF2/Richfaces 4项目,其中我想使用其中一个默认皮肤,但我也想使用我自己的自定义样式表设置一些东西的样式.这听起来很简单,但我发现至少在某些情况下,我自己的风格没有被使用.为了明确,这是我的相关web.xml context-params:

<context-param>
    <param-name>org.richfaces.skin</param-name>
    <param-value>blueSky</param-value>
</context-param>
<context-param>
    <param-name>org.richfaces.control_skinning</param-name>
    <param-value>enable</param-value>
</context-param>
<context-param>
    <param-name>org.richfaces.control_skinning_classes</param-name>
    <param-value>enable</param-value>
</context-param>

我的CSS文件包含:

<h:outputStylesheet name="jsp-css.css" library="css" />

一个这样的实际样式定义:

.obsOptBtnSel{
background-color: transparent;
background-image: url('/images/circleY.gif');
background-repeat: no-repeat;
background-position: center;
border: none;
text-align: center;
width: 2em;
height: 2em;
}

而实际按钮使用的风格:

<h:commandButton
value="?"
styleClass="#{obs.observation.observationExtent == -1.0 ? 'obsOptBtnSel' : 'obsOptBtnUns'}"
id="unknownButton"
/>

所以,人们会认为我会从相关的blueSky皮肤继承样式,然后因为我指定了样式类,所以自定义样式表中提到的任何属性都将被覆盖.

但相反,当我查看Firebug中的元素时,我看到我的styleClass被皮肤指定的覆盖,例如它继续使用blueSky背景图像而不是我的.

我知道我可以通过简单地在样式表中将所有样式放入!important来解决这个问题,但这似乎是一个非常糟糕和不必要的方法来处理这个问题.

我在这做错了什么？还有其他解决方案吗？

Answer 1

RichFaces已经在input[type=submit]CSS选择器上指定了默认背景,这是一个比选择器更强的选择器.obsOptBtnSel.基本上有两种选择:

1. 重命名您的选择器,input[type=submit].obsOptBtnSel使其更强大.

   input[type=submit].obsOptBtnSel {
       background-color: transparent;
       background-image: url('/images/circleY.gif');
       background-repeat: no-repeat;
       background-position: center;
       border: none;
       text-align: center;
       width: 2em;
       height: 2em;
   }
   

   注意,这4个背景属性可以设置为backgroundoneliner,其子属性顺序color image position repeat如下:

   background: transparent url('/images/circleY.gif') center no-repeat;
   

2. 添加!important到背景属性以覆盖!important其他CSS选择器设置的同一元素上的所有非属性.

   .obsOptBtnSel {
       background-color: transparent !important;
       background-image: url('/images/circleY.gif') !important;
       background-repeat: no-repeat !important;
       background-position: center !important;
       border: none;
       text-align: center;
       width: 2em;
       height: 2em;
   }
   

   或者,更短,

   background: transparent url('/images/circleY.gif') center no-repeat !important;