建議學(xué)習(xí)時(shí)長(zhǎng)： 30分鐘
學(xué)習(xí)方式：深入
學(xué)習(xí)目標(biāo)
- 知道什么是樣式的繼承
- 哪些樣式會(huì)繼承
- 什么是瀏覽器的層疊
詳細(xì)介紹
樣式的繼承
CSS樣式表繼承指的是芭逝，特定的CSS屬性向下傳遞到子孫元素塌碌。
需要注意的是
- 只有某些樣式規(guī)則會(huì)繼承
- 樣式規(guī)則是否繼承是由瀏覽器決定的
會(huì)繼承的樣式規(guī)則
會(huì)繼承的樣式主要包括：
- 字體相關(guān)的：font-family, font-size(繼承計(jì)算后的值), font-style,font-variant, font-weight, font, letter-spacing,line-height
- 文本：text-indent, text-align, layout-flow, writing-mode, white-space, word-wrap, text-kashida-space, layout-grid, layout-grid-char, layout-grid-char-spacing, layout-grid-line, layout-grid-mode, layout-grid-type
- 列表相關(guān)的：list-style-image, list-style-position,list-style-type, list-style
- 表格：border-collapse, border-spacing, caption-side, empty-cells, table-layout, speak-header
層疊
層疊，是一種樣式在文檔層次中逐層疊加的過程旬盯。目的是讓瀏覽器面對(duì)某個(gè)標(biāo)簽特定屬性值的多個(gè)來源台妆，確定最終使用哪個(gè)值。
對(duì)于層疊來說胖翰，樣式的主要來源：
- 瀏覽器默認(rèn)樣式
- 用戶樣式表
- 開發(fā)者定義的樣式：
- 定義在外部文件（外鏈樣式）
- 在頁面的頭部定義（內(nèi)聯(lián)樣式）
- 定義在特定的元素身上（行內(nèi)樣式）
用戶是指有特別需求的用戶接剩，例如視障人士，他們可以通過用戶樣式表泡态，強(qiáng)制瀏覽器加載的所有網(wǎng)站都以更大的字號(hào)搂漠，更容易分辨的顏色顯示內(nèi)容。
選擇器權(quán)重
各類選擇器的權(quán)重得分
- 帶 !important 的規(guī)則得分是最高的
- 行內(nèi)樣式（style="..."）1000分
- ID選擇器 100分
- 類選擇器某弦，偽類選擇器桐汤，屬性選擇器 10分
- 標(biāo)簽選擇器，偽元素選擇器 1分
- 通配選擇器 0分
- 繼承和瀏覽器默認(rèn)的的樣式的得分是最低的
由上可知靶壮，越特定的選擇器怔毛，權(quán)重越高。
當(dāng)有多個(gè)規(guī)則都能應(yīng)用于同一個(gè)元素時(shí)腾降，權(quán)重越高的樣式將被優(yōu)先采用拣度。若權(quán)重相同，則后定義的被采用螃壤。
任何一條與css繼承值沖突的屬性值都會(huì)覆蓋繼承的屬性值抗果。
