CSS選擇器的優先權順序

文章專區

網頁設計相關文章

網頁設計師在寫CSS時，是不是有時會發生明明已寫好屬性設定，但卻無法套用進頁面的情形呢？遇到這情況，不妨檢查看看CSS優先權的設定唷！CSS提供許多選擇器類型，當使用不同的選擇器時，套用樣式的優先權也會不同。

這邊整理優先順序的幾個原則，讓你在寫CSS時可以更容易掌握唷！

越左邊權限越高

元素內的樣式>頁面內的樣式>外部載入

元素內的樣式

例子：

頁面內的樣式

例子：

外部載入

例子：

以@import方式載入

在頁面內以 link 方式載入

後設定>前設定

最後設定的樣式將蓋過之前設定的樣式

例子：

最後會套用的屬性是

width:250px;

height:50px;

background:#fff;

Id>class

由於 id 具有不可重複性，而class則是可重複的，所以 id 在層級上大於 class，

如果一個元素同時有 id 跟 class 兩種屬性，且互有所衝突時，id 優先權大於 class。

!important 為最高優先

!important 的作用為強制提高優先權，照理說越後面設定的越優先，但若使用了 !important，會使得最前面的設定成了最優先，使用!important的 CSS 樣式幾乎等於無敵。

當出現二個!important時，優先權就是依先後順序，與其它的選擇器的原理相同，因此非必要的話，最好盡量少用!important。