CSS三大特性

CSS有三個非常重要的特性：層疊性、繼承性、優先順序。

1. 層疊性

給相同的選擇器設定相同的樣式，此時一個樣式就會覆蓋（層疊）另一個衝突的樣式。

層疊性主要解決樣式衝突的問題。

層疊性原則：

• 樣式衝突，遵循就近原則，哪個樣式離結構近，就執行哪個樣式
• 樣式不衝突，不會層疊

2. 繼承性

子標籤會繼承父標籤的某些樣式，如文字顏色和字號等。

子標籤可以繼承父標籤的樣式有：

• text-開頭的
• font-開頭的
• line-開頭的
• color

行高的繼承性：

body {
    font: 1.5 Microsoft Yahei;/*1.5倍行高*/
}

注：

• 行高可以跟單位也可以不跟單位
• 如果子元素沒有設定行高，則會繼承父元素的行高
• 此時子元素的行高為：當前子元素的文字大小*1.5
• 這種寫法優勢：裡面子元素可以更具自己文字大小自動調整行高

3. 優先順序

div {
    color: blue!important;/*表示優先順序最高*/
}

注：

1. 權重不會有進位
2. 等級判斷從左到右，如果某一位數值相同，則判斷下一位數值
3. 繼承的權重是0（即使加了!important也是0）
   ，如果改元素沒有直接選中，不管父元素權重有多高，子元素得到的權重都是0

權重疊加：如果是複合選擇器，則會有權重疊加，需要計算權重。

eg.

1. div ul li -> 0,0,0,1+0,0,0,1+0,0,0,1=0,0,0,3
2. .nav ul li -> 0,0,1,0,+0,0,0,1+0,0,0,1=0,0,1,2
3. a:hover -> 0,0,0,1+0,0,1,0=0,0,1,1