CSS！重要的是在提交类型上无法正常工作

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; 如果50px无效，我如何与!important合作？为什么它与17px合作？

Answer 1

在这种情况下你不需要使用！重要只是改变css的顺序

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

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

最后一次覆盖第一个

Answer 2

拼写 width 错误

#button_id {with:50px!important; font-size:17px!important;}

应该是：

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

Answer 3

覆盖！important修饰符

只需添加另一个带有！important的CSS规则，并为选择器提供更高的特异性（向选择器添加额外的标记，id或类），或者在以后的位置添加具有相同选择器的CSS规则一个（平局，最后一个定义胜利）。 Example

尝试让您需要拼写width然后#button_id {width:50px!important; font-size:17px!important;}

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