html - CSS选择器的优先级

Question

这是我的 HTML:

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

此 CSS 为该输入制作了一个 blue 边框:Demo

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

但这会为该输入生成一个红色 边框:Demo

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

---

我不知 Prop 体为什么，但我知道这与选择器的优先级有关。我认为 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 .