问题 Richfaces Skin Overriding Styleclass

我有一个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来解决这个问题，但这似乎是一个非常糟糕和不必要的方法来处理这个问题。

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

7512

2017-09-07 23:41

起源

答案:

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个背景属性可以设置为a background oneliner与订单中的子属性 color image position repeat：

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

加 !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;

2017-09-08 00:44

巴鲁斯再次获胜！我学到了一些关于CSS的新知识。我的印象是，更具体的样式总是会在覆盖场景中胜出，但事实显然并非如此。谢谢！ - user470714

别客气。为了更好地理解CSS优先级，我认为这篇文章读得很好： vanseodesign.com/css/css-specificity-inheritance-cascaade - BalusC

有没有办法包括我们自己的CSS文件后头脑中有多少？在相同的CSS选择器级别，它可以覆盖richfaces ... - Anthony O.

更具体的CSS确实获胜，但关于CSS选择器如何工作的数学使用特定的组乘数算法，起初可能有点复杂。该 !important 宣言胜出否则。这必须适度使用，但更多 !important 定义，然后一切都变得重要，因此......在某一点上，任何事情都很重要。 - Darrell Teague

答案: