CSS——CSS 結構和層疊

前端一萬小時發表於2019-04-15
CSS
本文推薦 PC 端閱讀~

本文同步更新於：
- 「公眾號：前端一萬小時」
- 「知乎：Oli's 前端一萬小時」
- 「語雀：前端一萬小時」

本文版權歸 “前端一萬小時” 所有，未經授權，請勿轉載！
複製程式碼

css 結構 層疊.png

前言： 在上一篇《CSS 選擇器詳解》中，我們文章一開始就談到了“結構樹”，也明白了之後的種種“選擇器”都是建立在有這個“結構樹”的基礎之上。這篇，我們將詳細闡述“結構樹”之於“繼承”、“層疊”等的重要性。
① 繼承：繼承是指在結構樹中，從一個元素向其後代元素傳遞屬性值所採用的機制；
② 層疊：層疊是一個“過程”，是瀏覽器“考慮”的“過程”——瀏覽器在確定應當向一個元素應用哪些值時，瀏覽器不僅要考慮“繼承”，還要考慮“宣告的特殊性”，另外還需要考慮“宣告本身的來源”。

1 特殊性/特定性

CSS——CSS 結構和層疊

“特殊性/特定性”對於理解如何向文件應用宣告很重要。
如果一個規則能“更準確”地選擇一個元素，那麼這個規則就更為“特定/特殊”！
可以通過計算的方法來得到這個“特定性”，值越大，特定性越強：

CSS——CSS 結構和層疊

例如：

h1 {
    color: red;
    background: yellow;
}  /*specificity=0001*/

p,div {
    font-family: sans-serif;
}  /*specificity=0002*/

#txa {
    width: 300px;
    height: 200px;
    margin-left: -12px;
}  /*specificity=0100*/

.done {
    text-decoration: line-through;
}  /*specificity=0010*/

li[class] {
    color: red;
    background:yellow;
}  /*specificity=0011*/
複製程式碼

⚠️ 注： 通配選擇器對一個選擇器的特定性沒有貢獻，其“特定性=0000”，雖全是 0 ，但這不代表他沒有“特定性”。反而需要記住的是：0 特定性比無特定性要強。
⚠️ 注：有時某個宣告可能非常重要，超過了所有其他宣告，則在這些宣告結束分號前加上 !important 。
如：

h1 {
    color: red;
    background: yellow !important;
}
複製程式碼

2 繼承

CSS——CSS 結構和層疊

繼承是 CSS 中最基本的內容之一。

繼承的值沒有“特定性”，甚至連 0 特定性也沒有。因此我們隨時能使用一個更“特定”的選擇器來覆蓋其從父選擇器繼承的屬性。

一般來講，如果樣式會影響你的文字外觀，則所有這些樣式都能“繼承”。如：字型顏色 color 、所有與字型相關的屬性:

font-family
font-size
font-weight
font-style
複製程式碼

⚠️ 而大多數 “框模型屬性” 就不能繼承（包括外邊距、內邊距、背景和邊框），比如給 <body> 元素加了一個邊框樣式，不代表我們希望這個“身體”裡所有的元素都有“邊框”。

3 層疊

CSS：Cascading Style Sheets 層疊樣式表。

CSS 基於的方法就是讓所有樣式“層疊”在一起，這是通過結合“繼承”和“特殊性”做到的。

層疊是一個“過程”，是瀏覽器“考慮”的“過程”——瀏覽器在確定應當向一個元素應用哪些值時，瀏覽器不僅要考慮“繼承”，還要考慮“宣告的特殊性”，另外還需要考慮“宣告本身的來源”。

站在“瀏覽器”的角度，它會進行以下幾步來決定應用什麼樣式：
第一步： 收集所有樣式表；

  • 包括：Web 頁面作者寫的樣式表，讀者自己增加的樣式表，還有瀏覽器的預設樣式。

第二步： 找到所有匹配的宣告；

第三步： 對所有匹配的規則排序；

  • 標誌 !important 的規則的權重要高於沒有 !important 標誌的規則。
  • 按“來源”——創作人員、讀者、瀏覽器，對應用到給定元素的所有宣告排序。一般來說，創作人員的樣式要勝於讀者的樣式；有 !important 標誌的讀者樣式強於所有其他樣式（包括有 !important 標誌的創作人員樣式）；創作人員樣式和讀者樣式都比瀏覽器預設樣式要強。

第四步： 按上文講的“特定性”計算值對所有宣告排序；

第五步： 按出現順序對應用到給定元素的所有宣告排序。

  • 一個宣告在樣式表或文件中越後出現，它的權重就越大；
  • 如果一個樣式表中有匯入的樣式表，一般認為出現在匯入樣式表中的宣告在前，主樣式表中的所有宣告在後。

4 對上篇文章中遺留問題的解答

a:link {
    color: blue;
}

a:visited {
    color: red;
}

a:hover {
    color: orange;
}

a:active {
    color：black;
}
複製程式碼

如上一篇文章所說：我們需要按以上順序來宣告連結樣式。

通過這篇的學習，我們知道了原因：

  • 他們都有相同的權重、來源；
  • 所有這些選擇器的“特定性”值都是一樣的：0011；
  • 因此，順序上與元素匹配的最後一個選擇器才會勝出。

即：

  • 首先，正常情況下，a 的顏色是“藍色”；
  • 然後，當我滑鼠放上去之後，:hover 在順序上在下邊，所以變為“橙色”；
  • 接著，當我滑鼠按下去時，表示我的滑鼠正在這個元素上，那麼 :link 、 :hover 、 :active 都生效，但按層疊規則，:active 在順序上的最下邊，故對以上產生覆蓋，所以變成“黑色”；
  • 最後，當我點選過這個連結之後，滑鼠移開後，:link 和 :visited 生效，:visited 將 :link 覆蓋並永久生效。

後記： 本篇知識點不多，屬於基礎知識，需要爛熟於心。路還很長，希望收穫在路上，快樂在路上。

加油！

相關文章