?

官方表述的CSS樣式優(yōu)先級(jí)如下：

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

---

?

那么，我們來舉個(gè)例子：

html代碼：

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

引入一個(gè)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可以發(fā)現(xiàn)

?

? ? ? ? ? ? ? ? ? ? ?圖1 ↑

可見內(nèi)聯(lián)式的樣式權(quán)重要高于外部引用，那么我們把內(nèi)聯(lián)的style樣式去掉，圖片顯示大小如圖2：

?

? ? ? ? ? ? ? ? ?圖2↑ ? ? ? ? ? ? ? ? ? ? ? ? ? 圖3↑ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖4↑

同樣是外部引用的樣式，ID比其他的都要優(yōu)先，把#img的樣式去掉，效果如圖3：效果是引用了屬性選擇器寬度為300px?

再把鼠標(biāo)移動(dòng)上去效果如圖4。

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

?

? ? ? ? ? ? ?圖4↑ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖5↑ ? ? ? ? ? ? ? ? ? ? ?圖6↑

再將外部引用的樣式復(fù)制到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> ?

發(fā)現(xiàn)嵌入式的樣式權(quán)重都要高于外部引用，最后的優(yōu)先級(jí)如下：

?	內(nèi)聯(lián)	嵌入	外部
內(nèi)聯(lián)	1	-?	-?
ID 選擇器	-	?2	?3
偽類	-	?4	?5
屬性選擇器	-	?6	?7
類選擇器	-	?8	?9
元素(類型)選擇器	-	10?	11?
*	-	12?	?13

*上述表格從小到大，數(shù)值越小越優(yōu)先！

---

?

事實(shí)上，CSS內(nèi)部是按每條樣式的權(quán)重值來計(jì)算優(yōu)先級(jí)的，各類型選擇器所對(duì)應(yīng)的權(quán)重值如下：

元素, 偽元素: 1 – (0,0,0,1) 類, 偽類, 屬性: 1 – (0,0,1,0) ID: 1 – (0,1,0,0) 內(nèi)聯(lián)樣式: 1 – (1,0,0,0)

也就相當(dāng)于：

第一等：代表內(nèi)聯(lián)樣式，如: style=””，權(quán)值為1000。

第二等：代表ID選擇器，如：#content，權(quán)值為100。

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

第四等：代表類型選擇器和偽元素選擇器，如div p，權(quán)值為1。

?

實(shí)例：?

<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

?

顯示結(jié)果：

?

---

?

！important修改權(quán)重

本面試題為前端常考面試題，后續(xù)有機(jī)會(huì)繼續(xù)完善。我是歌謠，一個(gè)沉迷于故事的講述者。

歡迎一起私信交流。

“睡服“面試官系列之各系列目錄匯總（建議學(xué)習(xí)收藏）?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。