iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
自我挑戰組

從零開始前端學習(HTML、CSS、JavaScript) 系列 第 11

Day 11 CSS <三大特性>

CSS中語法有著三大特性 分別為: 層疊性繼承性優先性

1. 層疊性

若是設置給相同選擇器相同的樣式

此時一個樣式就會覆蓋(層疊)另一個衝突的樣式

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

原則:

  • 樣式衝突遵循就近原則,哪個離結構進選哪個
  • 樣式不衝突,不會層疊

2. 繼承性

CSS中的繼承:子標籤會繼承父標籤的某些樣式

  • 使用CSS繼承特性可以簡化代碼,降低CSS樣式的複雜
  • 子元素可繼承父元素的樣式

EX :(text- , font-,line- & color)

行高繼承性:

body{

font : 12px/1.5 '字體';

}

(1.5 = 當前元素文字大小font-size的1.5倍行高)

  • 行高可以跟單位也可以不跟單位
  • 如果子元素沒有設置行高 則會繼承父元素的行高為1.5
  • 此時子元素的行高是 : 當前子元素的文字大小*1.5
  • body行高1.5 這樣的寫法最大的優勢就是裡面子元素可以根據自己文字大小自動調整行高

3. 優先性

當同一個元素指定多個選擇器,就會有優先級的產生

  • 選擇器相同 則執行層疊性
  • 選擇器不同 根據選擇器權重執行

優先級注意事項:

  1. 權重是由4組數字組成,但是不會有進位

  2. 可以理解為類選擇器永遠大於元素選擇器 ID選擇器永遠大於類選擇器 以此類推

  3. 等級判斷從左到右 如果某一位數值相同 則判斷下一位

  4. 可以使用簡單記憶法:
    通配符和繼承權重為0,標籤選擇器為1

    類(偽類)選擇器為10,ID選擇器為100

    行內樣式選擇器為1000,!important無窮大

  5. 繼承權重為0,系統默認給<a>標籤藍色斜線

權重疊加:如果是復合選擇器 會有權重疊加 需要計算

CSS權重(specificity) By 歐瑞


上一篇
Day 10 CSS <元素顯示模式>
下一篇
Day 12 CSS <圓角邊框、盒子陰影>
系列文
從零開始前端學習(HTML、CSS、JavaScript) 30

尚未有邦友留言

立即登入留言