Richfaces 皮肤覆盖样式类

Posted 2023-02-23

【中文标题】Richfaces 皮肤覆盖样式类

【英文标题】：Richfaces Skin Overriding Styleclass

【发布时间】：2011-11-12 14:08:30

【问题描述】：

我有一个 JSF2/Richfaces 4 项目，我想在其中使用默认皮肤之一，但我也想使用我自己的自定义样式表设置一些东西的样式。这听起来很简单，但我发现至少在某些情况下，我自己的风格没有被使用。明确地说，这是我相关的 web.xml 上下文参数：

<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 放在样式表中的所有样式之后来解决此问题，但这似乎是处理此问题的一种非常糟糕且不必要的方法。

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

【参考方案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;

【讨论】：

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

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

有没有办法将我们自己的css文件在 Richfaces之后包含在head中？在相同的 CSS 选择器级别，它可以覆盖richfaces 的...

更具体的 CSS 确实胜出，但关于 CSS 选择器如何工作的数学运算使用了特定的组乘数算法，起初可能有点难以理解。 !important 声明胜过其他情况。这必须适度使用，尽管随着!important 的定义越多，那么一切都变得重要，因此......在某一点上没有什么是重要的。