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 atribute) и font-size 17px, потому что #button_id содержит font-size:17px!important; Как я могу с 50px, если !important не работает? И почему он работает с 17px?

Answer 1

Переопределение! Важный модификатор

Просто добавить еще одно правило CSS с! Важным, и либо дать селектор более высокую специфичность (добавление дополнительного тега, идентификатор или класс в селекторе), или добавить правило 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; 
} 

Answer 2

В этом случае вам не нужно использовать! Важно просто изменить порядок CSS

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

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

Последние перезаписывает первый

Answer 3

Вы пишете ширина неправильный

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

Оно должно быть:

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