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;
}
...

和button仍具有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}

最后覆蓋第一個

Answer 2

您拼寫寬度錯誤

#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規則（在平局，則最后一個獲勝）。 例

嘗試正確#button_id {width:50px!important; font-size:17px!important;} width ，然后#button_id {width:50px!important; font-size:17px!important;} #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;
}