CSS樣式的優先級詳解
- IT技術
- 關注:1.6W次
在做網頁開發,基本上都會處理CSS樣式的,css樣式的優先級大家都弄清楚了嗎?如果不清楚,自己寫的樣式為什麼被覆蓋了都不知道的。下面一起來了解下。
操作方法
(01)同級別的樣式,後面寫的樣式,肯定會比前面的更優先。(在樣式裏不添加!important屬性的情況)代碼如圖
![CSS樣式的優先級詳解 CSS樣式的優先級詳解](https://i3.miaozhigu.com/4d3900d2/5c6055816e/073d06d43b973929/523d53d26fc661295af15fd1f97df747.jpg)
(02)運行頁面,可以看到我們第一個p的文字顏色是後面定義的紅色,優先級高,把前面定義的黒色覆蓋了。
![CSS樣式的優先級詳解 第2張 CSS樣式的優先級詳解 第2張](https://i1.miaozhigu.com/4d3900d2/5c6055816e/073d06d43b973929/4c7b5e9167d96c7457fe16d1f97df746.jpg)
(03)如果把樣式類名,改成用ID定義的樣式呢,如圖
![CSS樣式的優先級詳解 第3張 CSS樣式的優先級詳解 第3張](https://i2.miaozhigu.com/4d3900d2/5c6055816e/073d06d43b973929/543858d57c93696943a745d1f97df44f.jpg)
(04)可以看到,現在第一個p的文字是黑色的,雖然用ID定義的樣式是先寫,但ID比類具有更高的優先級,後寫的類樣式覆蓋不了這個ID定義的樣式。
![CSS樣式的優先級詳解 第4張 CSS樣式的優先級詳解 第4張](https://i3.miaozhigu.com/4d3900d2/5c6055816e/073d06d43b973929/597f4e8c6dd57f7a02ed12d1f97df44e.jpg)
(05)在用類做樣式定義時,層級較多的,優先級比層級少的更高,代碼如圖,第一個樣式用了二層去定義類為A的樣式,它比第二個樣式(層級只有一層)有更高級別。
![CSS樣式的優先級詳解 第5張 CSS樣式的優先級詳解 第5張](https://i1.miaozhigu.com/4d3900d2/5c6055816e/073d06d43b973929/073e00d269d36f7505f952d1f97df44d.jpg)
(06)運行後,可以看到現在文字的樣式是第一個樣式定義的藍色字體。
![CSS樣式的優先級詳解 第6張 CSS樣式的優先級詳解 第6張](https://i2.miaozhigu.com/4d3900d2/5c6055816e/073d06d43b973929/4c3c5b8569d0396949f543d1f97df44c.jpg)
(07)再介紹一種比較特殊的情況,就是樣式里加了 !important屬性的樣式,是優先級最高的,不管是ID定義的樣式,還是層級較多的類定義的樣式,都比這個屬性的優先級低。代碼如圖
![CSS樣式的優先級詳解 第7張 CSS樣式的優先級詳解 第7張](https://i3.miaozhigu.com/4d3900d2/5c6055816e/073d06d43b973929/5a604cd66cc7782a47e54cd1f97df44b.jpg)
(08)運行頁面後,可以看到,現在第一個p的文字是紅色,就是加了 !important屬性的樣式定義的顏色,該樣式優先級最高。
![CSS樣式的優先級詳解 第8張 CSS樣式的優先級詳解 第8張](https://i1.miaozhigu.com/4d3900d2/5c6055816e/073d06d43b973929/5f77478a68ce3e7a49f845d1f97df44a.jpg)
- 文章版權屬於文章作者所有,轉載請註明 https://miaozhigu.com/zh-hk/sm/itjishu/z1gkk1.html