建議學(xué)習(xí)時長： 30分鐘
學(xué)習(xí)方式：深入
學(xué)習(xí)目標
- 知道什么是樣式的繼承
- 哪些樣式會繼承
- 什么是瀏覽器的層疊
詳細介紹
樣式的繼承
CSS樣式表繼承指的是，特定的CSS屬性向下傳遞到子孫元素。
需要注意的是
- 只有某些樣式規(guī)則會繼承
- 樣式規(guī)則是否繼承是由瀏覽器決定的
會繼承的樣式規(guī)則
會繼承的樣式主要包括：
- 字體相關(guān)的：font-family, font-size(繼承計算后的值), 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
層疊
層疊，是一種樣式在文檔層次中逐層疊加的過程。目的是讓瀏覽器面對某個標簽特定屬性值的多個來源，確定最終使用哪個值。
對于層疊來說，樣式的主要來源：
- 瀏覽器默認樣式
- 用戶樣式表
- 開發(fā)者定義的樣式：
- 定義在外部文件（外鏈樣式）
- 在頁面的頭部定義（內(nèi)聯(lián)樣式）
- 定義在特定的元素身上（行內(nèi)樣式）
用戶是指有特別需求的用戶，例如視障人士，他們可以通過用戶樣式表，強制瀏覽器加載的所有網(wǎng)站都以更大的字號，更容易分辨的顏色顯示內(nèi)容。
選擇器權(quán)重
各類選擇器的權(quán)重得分
- 帶 !important 的規(guī)則得分是最高的
- 行內(nèi)樣式（style="..."）1000分
- ID選擇器 100分
- 類選擇器，偽類選擇器，屬性選擇器 10分
- 標簽選擇器，偽元素選擇器 1分
- 通配選擇器 0分
- 繼承和瀏覽器默認的的樣式的得分是最低的
由上可知，越特定的選擇器，權(quán)重越高。
當有多個規(guī)則都能應(yīng)用于同一個元素時，權(quán)重越高的樣式將被優(yōu)先采用。若權(quán)重相同，則后定義的被采用。
任何一條與css繼承值沖突的屬性值都會覆蓋繼承的屬性值。
