CSS系列 (03):CSS三大特性
層疊性
層疊性指的是樣式的優先順序,當產生衝突時以優先順序高的為準,優先順序相同時取後面定義的屬性樣式。
繼承性
繼承性指的是子孫元素可以繼承父元素的屬性。
記錄一下開發中常用的繼承屬性:
-
字體系列
font、font-style、font-weight、font-size、font-family -
文本系列
text-align、text-indent、line-height、color、、、、、 -
元素可見性
visibility -
游標屬性
cursor
優先順序
CSS的specificity特性或非凡性,它是一個衡量css優先順序的一個標準,specificity用一個四位數來表示,更像四級從左到右,左的最大級,一級大於一級,數位之間沒有進位,多個選擇符用到同一個元素上時那麼specificity上值高的最終獲得優先順序。
貢獻值
| 貢獻值 | 權重 |
|---|---|
| !important | ∞ 無窮大 |
| 內聯樣式 | 1,0,0,0 |
| ID選擇器 | 0,1,0,0 |
| 類選擇器,偽類選擇器,屬性選擇器 | 0,0,1,0 |
| 標籤選擇器,偽元素選擇器 | 0,0,0,1 |
| 通配符選擇器 | 0,0,0,0 |
優先順序總結:
!important > 內聯樣式 > ID 選擇器 > 類選擇器 = 偽類選擇器 = 屬性選擇器 > 標籤選擇器 = 偽元素選擇器 > 通配符選擇器
注意:
權重的進位並不是十進位,可以理解為其不會向前進一位,100個類選擇器的優先順序也小於1個ID選擇器 即: 0,0,9,0 < 0,1,00
栗子
#nav p : 0,1,0,1
.nav ul li : 0,0,1,2
a:hover : 0,0,1,1
div ul li::after : 0,0,0,4
!important
!important規則是一個bug級別的存在,優先順序是無窮大。
一般來說,不要頻繁使用!important規則,這是一個壞習慣,除非被逼無奈【老程式碼中寫了很差勁的內聯樣式或者引用的JavaScript框架中使用了內聯樣式…】

