?

官方表述的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)

也就相當于：

第一等：代表內聯樣式，如: style=””，權值為1000。

第二等：代表ID選擇器，如：#content，權值為100。

第三等：代表類，偽類和屬性選擇器，如.content，權值為10。

第四等：代表類型選擇器和偽元素選擇器，如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修改權重

本面試題為前端常考面試題，后續有機會繼續完善。我是歌謠，一個沉迷于故事的講述者。

歡迎一起私信交流。

“睡服“面試官系列之各系列目錄匯總（建議學習收藏）?

總結

以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题之第四十五篇CSS优先级（建议收藏）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。