CSS !important 在提交类型上无法正常工作

Question

我知道 CSS 是如何工作的，但这有点让人困惑。

我有按钮:

<input type="submit" name="button_name" id="button_id" value="Enter">

CSS文件:

 #button_id 
{ 
  width: 50px !important; 
  font-size: 17px !important;
}
...
input[type=submit] 
{
  width: 300px;
  height: 45px;
  font-weight:bold!important;
  font-size:30px!important;
}
...

按钮仍然有 300px(应该有 50px 因为 !important 属性)和 font-size 17px 因为 #button_id 包含 font-size:17px!important;如果 !important 不起作用，我怎么能使用 50px？为什么它与 17px 一起工作？

Answer 1

在这种情况下你不需要使用 !important 只需改变 css 的顺序

input[type=submit] {
  width: 300px;
  height: 45px;
  font-weight:bold;
  font-size:30px;
}

#button_id {width:50px; font-size:17px}

最后一个覆盖第一个