CSS三大特性

CSS三大特性

CSS有三個很是重要的特性：層疊性、繼承性、優先級。

1. 層疊性

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

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

層疊性原則：

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

2. 繼承性

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

子標籤能夠繼承父標籤的樣式有：

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

行高的繼承性：

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

注：

• 行高能夠跟單位也能夠不跟單位
• 若是子元素沒有設置行高，則會繼承父元素的行高
• 此時子元素的行高爲：當前子元素的文字大小*1.5
• 這種寫法優點：裏面子元素能夠更具本身文字大小自動調整行高

3. 優先級

選擇器	選擇器權重
繼承、*	0,0,0,0
元素選擇器	0,0,0,1
類選擇器、僞類選擇器	0,0,1,0
ID選擇器	0,1,0,0
行內樣式 style=""	1,0,0,0
!important 重要的	無窮大

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