css樣式優先級問題

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

通用選擇器（*） < 元素(類型)選擇器 < 類選擇器 < 屬性選擇器 < 偽類 < ID 選擇器 < 內聯樣式

 

---

 

那么，我們來舉個例子：

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	-	-
ID 選擇器	-	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。

 

實例： 

<div class="img-div" id="img-div">
    <div id="img-div1">
        <img src="images/u484.png" class="img" id="img" alt="img" />
    </div>
</div>

 

#img-div #img-div1 #img{width:300px}//300
#img-div #img{width:200px}//200
#img{width:150px;}//100

 

顯示結果：

 

---

 

！important修改權重

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