スタイルシート（CSS）は、Webサイトを作っている人間以外にもサイトを閲覧している人やブラウザもCSSを適用されています。なので場合によっては、指定された内容が競合することも起こりえます。通常は、同一要素で異なる指定がされた場合には、高い順に「制作者」→「ユーザー」→「ユーザーエージェント（ブラウザが持つデフォルトCSS）」で優先されて適用されます。しかし、「!important」を利用することでその優先順位を変えることができます。
例えば、ブラウザのデフォルトCSSに以下のような記述がされているとします。

h1 {
  font-size: 16px !important;
}

この場合、制作者の指定よりも優先して適用されるようになります。これは、同じCSS内でも利用できることで、通常、CSSは上から記述された順に読み込まれていきますので、同じ適用先に違う指定が複数あったら、上書きされて最後に指定されたスタイルが適用されます。
しかし、「!important」を使うことで、上書きされずに何よりも優先して適用するように制御することができます。

すべてのCSSに「!important」が付与された場合に適用される優先順位は、高い順に「ユーザーエージェント（!important付与）」→「ユーザー（!important付与）」→「制作者（!important付与）」→「制作者」→「ユーザー」→「ユーザーエージェント」で優先されてスタイルが適用されます。

おすすめの記事