[CSS] CSS 的 !important 使用

相信有寫過 CSS 的朋友都知道 CSS 的優先性: inline-style > id > class。

selector 越明確的話優先度越高,如 p.text > p

但是,如果有用過 CSS 框架(bootstrap、angular-material)的,可能就會發現有些 CSS 被設置了 !important。由於會增加後續維護困難,在平常可能比較少見。


因此我們來看一個 <p> 標籤若被設置 style、class、id 與 !important 各種不同顏色。

試著移除CSS後,可以發現優先序為:!important > inline style > id > class

由此可知,!important 會優先於其他的 selector 設定的 CSS。

因此使用大量的 !important 將會導致覆寫複雜及除錯困難,可以的話盡量少用。

Leave a Reply

Your email address will not be published. Required fields are marked *