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