Richfaces Skin Overriding Styleclass

Question

我有一個JSF2/Richfaces 4項目，我想使用其中一個默認皮膚，但我也想使用我自己的自定義樣式表設置一些樣式。這聽起來很直截了當，但我發現至少在某些情況下，我自己的風格沒有被使用。要明確的，這裏是我的web.xml相關上下文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背景圖像而不是我的。

我知道我可以通過在樣式表中簡單地放置！重要的所有樣式來解決這個問題，但這似乎是處理這個問題的一個非常糟糕和不必要的方法。

我在這裏做錯了什麼？還有其他解決方案嗎？

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個背景屬性可被設置爲一個background oneliner與在順序子屬性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;