2013-01-22 59 views
0

我使用的是icefaces 3.2。我的輸入框有一個css問題。我有一個文本輸入是如下背景顏色css沒有得到申請ace:textEntry

   <ace:textEntry id="custName" value="#{strformbean.customer1.custName}" size="20" maxlength="50" label="Customer Name" 
        required="true" styleClass="requiredField" /> 

    <style type="text/css" > 
    .requiredField{ 
     background: rgb(255,239,214) ; 
     border-color:Gray ; 
    } 
</style> 

的的styleClass =「requiredField」應該改變HTE textentry.But是沒有得到應用它的背景顏色。當我使用IE CSS調試器,我注意到,這是因爲實際的HTML源代碼如下

<input name="form:custName_input" class="ui-inputfield ui-textentry ui-widget ui-state-default ui-corner-all ui-state-required requiredField" id="form:custName_input" role="textbox" aria-required="true" type="text" size="20" maxLength="50" jQuery17104644470378519651="44"/> 

有很多我的CSS規則之前應用於該輸入框的CSS規則。在我的規則中的背景風格顯示爲被逐出,這意味着有一些其他規則應用背景。

回答

1

首先,如果可能的話,我建議使用帶有更好的開發工具的瀏覽器。 Chrome,Safari,Opera和Firefox都提供了很好的工具,可以更詳細地說明樣式來自哪裏,哪些被覆蓋。它們還允許您即時切換,修改和添加新樣式。

對於您的情況,考慮到應用於輸入字段的其他類的數量,極有可能您的類.requiredField正被具有更高特異性的選擇器覆蓋。例如,下面的規則:

.requiredField { 
    color: rgb(255,239,214); 
} 

將通過將覆蓋這一個:

.container .requiredField { 
    color: black; 
} 

有克里斯Coyier一個偉大的一篇文章,詳細地解釋了這個話題:http://css-tricks.com/specifics-on-css-specificity/

鑑於你選擇器可能被覆蓋,您有兩種選擇:

  1. 給您的選擇比其它更高的特異性(如上述),例如:
    .container .requiredField { ... }

  2. 使用!important重寫施加到元件,例如所有其他樣式
    color: red !important;注:我只是建議這個,因爲它適合風格(驗證)的目的。這應該謹慎使用,因爲它可能導致多重覆蓋的長期維護問題。

在這兩種情況下,重要的是要確切地看到正在應用的其他樣式,以便您可以使用最佳解決方案。例如,爲了覆蓋其他樣式,任意將ID和類添加到選擇器並不是一個好主意,因爲這會導致相同的問題。我也建議不要使用<style>在文檔中添加樣式。儘管它非常有效,但它使得很難跟蹤CSS,並且通常被認爲是不好的做法。最好使用<link>標籤鏈接到外部樣式表。