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更强的选择器。基本上有两种选择：

将您的选择器重命名为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个背景属性可以设置为background oneliner，其子属性的顺序为color image position repeat ：

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

将!important添加到背景属性，以覆盖其他CSS选择器在同一元素集上的所有非!important属性。

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

Richfaces Skin Overriding Styleclass

1 个答案: