重要的CSS類沒有被應用？

Question

我有這樣的HTML：

.text-success { 
 
    width: 75px; 
 
    padding: 1px; 
 
    color: #4c9709; 
 
} 
 

 
.SomethingOrOther { 
 
    padding: 0px 0px 0px 37px !important; 
 
    color: #FFA500 !important;  
 
} 
 

 
.lineheight { 
 
    line-height: 21px !important; 
 
}

<b><span id="lblSomethingOrOther" class="text-success lineheight SomethingOrOther"><a onclick="SomeAction('Something', 'Other');"><u>Text which appears incorrectly</u></a></span></b>

在text-success類中，我們採用了一些東西，但其中之一是color: #4c9709;（綠色）。 SomethingOrOther類也適用color: #FFA500 !important;（橙色），但是當我運行該軟件時，文本是錯誤的顏色;它使用text-success的綠色。

爲什麼它不尊重!important標誌並使用第二種顏色？試過IE，Chrome和Firefox。

我可以可能從HTML刪除text-success類但這是正確的行爲我們的Live服務器上，但不是我們的本地測試服務器，我想弄清楚爲什麼...

Answer 1

這個問題似乎在於特異性值。你用css越具體，它就越高。例如。

一個類不那麼具體那麼一個ID，所以ID贏得任何覆蓋 內聯樣式比ID更具體，所以樣式贏了。

！重要的規則可能已經到位，但由於css的特殊性而不起作用。在上課前添加元素類型應使特異性戰勝其他規則

例如CSS（除內嵌重要！）：

.class {color: #fff;} 
#id {color: #000;} /*id will win*/ 

span.class {color: #fff;} 
#id {color: #000;} /*id will lose because span.class narrows down selectors moreso than #id*/ 

Answer 2

試試這個代碼，它工作。你可以看到它here。

<span id="lblSomethingOrOther" class=" lineheight SomethingOrOther"> 
<span >this is blue.</span> 
<a onclick="SomeAction('Something', 'Other');"><u class="text-success">this is green.</u> 
</a> 
</span> 

的CSS：

.SomethingOrOther { 
    padding: 0px 0px 0px 37px !important; 
    color: blue !important;  
} 
.text-success { 
    width: 75px; 
    padding: 1px; 
    color: green ; 
} 
.lineheight { 
    line-height: 21px !important; 
} 

你必須使用對父母和其他CSS ATTR重要的CSS ATTR上CHILDES或父母的節點！