CSS基础(part4)--CSS的层叠性继承性优先级
學習筆記，僅供參考，有錯必糾
參考自：CSS中文文檔
文章目錄
- CSS
- CSS層疊性
- CSS繼承性
- CSS的優先級(特殊性)
- 復合選擇器的優先級
- 關于優先級權重的注意事項
CSS
CSS層疊性
所謂層疊性是指多種CSS樣式疊加的處理方案。
- 舉個例子
頁面：
CSS繼承性
所謂繼承性是指書寫CSS樣式表時，子標記會繼承父標記的某些樣式，如文本顏色和字號。
- 圖示
- 舉個例子
頁面：
- 舉個例子2
頁面：
- 注意事項
恰當地使用繼承可以簡化代碼，降低CSS樣式的復雜性。但是，如果在網頁中所有的元素都大量繼承樣式，那么判斷樣式的來源就會很困難，所以，如字體、字號、顏色、行距等樣式，我們可以在body標簽中統一設置，然后通過繼承影響文檔中所有文本。
所有與文字相關的都可以繼承，比如：color、text-系列、font-系列、line-系列、cursor等；
并不是所有的CSS屬性都可以繼承，例如，下面的屬性就不具有繼承性：邊框、外邊距、內邊距、背景、定位、元素寬高屬性。
CSS的優先級(特殊性)
內聯樣式優先級最高；
ID選擇器的優先級，僅次于內聯樣式；
類選擇器優先級低于ID選擇器；
標簽選擇器低于類選擇器。
- 優先級圖示
- 舉個例子1
頁面：
- 舉個例子2
頁面：
- 結論
- 繼承的樣式的優先級 > 瀏覽器默認樣式的優先級
- 通配符選擇器樣式的優先級 > 繼承的樣式的優先級
- 標簽選擇器的樣式的優先級 > 通配符選擇器的樣式的優先級
- 類選擇器的樣式的優先級 > 標簽選擇器的樣式的優先級
- id選擇器的優先級 > 類選擇器的樣式的優先級
- 行內樣式的優先級 > id選擇器的優先級
復合選擇器的優先級
定義CSS樣式時，經常出現兩個或更多規則應用在同一元素上，這時就會出現優先級的問題。
現在我有3個復合選擇器，它們分別是：
選擇器A：ID選擇器 類選擇器 ID選擇器 選擇器B：類選擇器 類選擇器 標簽選擇器 選擇器C：標簽選擇器 標簽選擇器 類選擇器 類選擇器請問它們的如何排它們的優先級？
我們都知道：
ID選擇器優先級 > 類選擇器優先級 > 標簽選擇器優先級這里，我們將這3個復合選擇器中各個選擇器的數量分別計算出來，并繪制成表格，進行優先級比較：
| 選擇器A | 2 | 1 | 0 |
| 選擇器B | 0 | 2 | 1 |
| 選擇器C | 0 | 2 | 2 |
可以看到，選擇器A的ID選擇器數量為2，在3個選擇器中數量最多，所以它的優先級最高；在剩下的兩個選擇器中，選擇器B和選擇器C的類選擇器數量都一樣多，所以我們再對他們的標簽選擇器數量進行比較；我們發現，選擇器C的標簽選擇器數量大于選擇器選擇器B，所以選擇器C的優先級大于選擇器B的優先級。
也就是說，優先級先后順序為：
選擇器A > 選擇器C > 選擇器B- 舉個例子
頁面：
關于優先級權重的注意事項
繼承樣式的權重為0，即在嵌套結構中，不管父元素樣式的權重多大，當被子元素繼承時，他的權重都為0，也就是說子元素定義的樣式會覆蓋繼承來的樣式，如：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS選擇器案例</title><style>.aside .aside-dt h1 {background-color: silver;}.aside #title-txt {/* 雖然.aside .aside-dt h1選擇器的優先級低于.aside #title-txt選擇器的優先級，但是div標簽為h1標簽的父標簽，h1標簽的樣式會覆蓋掉div標簽的樣式所以在這里復合選擇器的優先級沒有起到作用*/background-color: yellow;}</style> </head> <body><div class="wrap"><div class="aside"><div class="aside-dt" id="title-txt"><h1 class="title-demo" id="id-title" style="color: pink;">我是一個標題</h1> </div><div class="aside-dd"><p>我是一個段落</p></div></div></div> </body> </html>頁面：
總結
以上是生活随笔為你收集整理的CSS基础(part4)--CSS的层叠性继承性优先级的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 苹果 AR / VR 头显细节进一步确认
- 下一篇： CSS基础(part5)--displa