CSS選擇

Question

這裏的優先級是我的HTML：

<input type='submit' class='clsname'> 

這個CSS使得blue邊界爲輸入：Demo

input{ 
    border: 1px solid red; 
} 
.clsname{ 
    border: 1px solid blue; 
} 

但這使得red邊界爲輸入：Demo

input[type='submit']{ 
    border: 1px solid red; 
} 
.clsname{ 
    border: 1px solid blue; 
} 

---

我不知道爲什麼，但我知道它與選擇器的優先級有關。我認爲input[type='submit']比classname具有更大的優先級，但input沒有比classname更高的優先級。

現在我有一個這樣的選擇器：input[type='submit']，我需要給予類名更大的優先級。我怎樣才能做到這一點？我的意思是這樣的：

input[type='submit'] { } 
.clsname { /* bigger priority here */ } 

注：我可以通過!important做的，但我想知道是否有任何其他的方法呢？因爲使用!important是而不是推薦。

Answer 1

這是特異性。閱讀更多here on W3。使用input[type='submit'].clsname, .clsname選擇器。

這裏是fiddle。

Answer 2

您可以有意識地使您的選擇器超過您的資格，從而給予其優先權。

input[type="submit"].clsname