css樣式優先順序問題，css樣式優先順序

css樣式優先順序問題，css樣式優先順序

官方表述的CSS樣式優先順序如下：

通用選取器（*） < 元素(類型)選取器 < 類別選取器 < 屬性選取器 < 偽類 < 識別碼選取器 < 內聯樣式

 

 

那麼，我們來舉個例子：

html代碼：

<div class="img-div">    <img src="images/icon.png" class="img" id="img" alt="img" style="width:50px" /></div>

引入一個style.css樣式：

<link type="text/css" rel="stylesheet" href="css/style.css" />

在style.css樣式中寫入

 

*{width:100px}.img{width:400px;}img[alt="img"] {width:300px}img:hover{width:350px}img{width:450px}#img{width:250px;}

 

開啟html可以發現

 

                     圖1 ↑

可見內聯式的樣式權重要高於外部參考，那麼我們把內聯的style樣式去掉，圖片顯示大小2：

 

                 圖2↑                           圖3↑                              圖4↑

同樣是外部參考的樣式，ID比其他的都要優先，把#img的樣式去掉，效果3：效果是引用了屬性選取器寬度為300px 

再把滑鼠移動上去效果4。

以此類推，分別去掉屬性選取器（圖4），類別選取器（圖5），元素選取器（圖6）

 

             圖4↑                               圖5↑                      圖6↑

再將外部參考的樣式複製到html中嵌入<style></style>：

<style>    *{width:500px}    #img{width:550px;}    img[alt="img"] {width:600px}    img:hover{width:650px}    .img{width:700px;}    img{width:750px}</style>

發現嵌入式的樣式權重都要高於外部參考，最後的優先順序如下：

	內聯	嵌入	外部
內聯	1	-	-
識別碼選取器	-	2	3
偽類	-	4	5
屬性選取器	-	6	7
類別選取器	-	8	9
元素(類型)選取器	-	10	11
*	-	12	13

*上述表格從小到大，數值越小越優先！

 

 

事實上，CSS內部是按每條樣式的權重值來計算優先順序的，各類型選取器所對應的權重值如下：

 

元素, 虛擬元素: 1 – (0,0,0,1) 類, 偽類, 屬性: 1 – (0,0,1,0) ID: 1 – (0,1,0,0) 內聯樣式: 1 – (1,0,0,0)

 

也就相當於：

1. 第一等：代表內聯樣式，如: style=””，權值為1000。
2. 第二等：代表ID選取器，如：#content，權值為100。
3. 第三等：代表類，偽類和屬性選取器，如.content，權值為10。
4. 第四等：代表類型選取器和虛擬元素選取器，如div p，權值為1。

 

 

！important修改權重

如非特殊情況，慎用!important。因為使用!important會擾亂原本層疊和權重產生正常的作用順序，使後期維護帶來麻煩。