Serve para sobrepor o css ja atribuido para o elemento, Exemplo:
.corAzul{
background-color: blue !important;
}
.corVerde{
background-color: green;
}
<input type="text" style="background-color:red;" class="corAzul"/>
<input type="text" style="background-color:red;" class="corVerde"/>
Como pode ver no exemplo eu tenho as classes corAzul e corVerde sendo a azul como important e a verde não e inline eu coloquei para ser vemelho, No input1 ele traz azul e no verde ele considera o inline,
Então como tem os dois styles iguais para o mesmo elemento com o !important você diz ao browser qual ele deve considerar.