CSS 層疊繼承規則總結
經典真題
- 請簡述一下 CSS 中的層疊規則
CSS 中的層疊繼承規則
在前面《CSS屬性的計算過程》中，我們介紹了每一個元素都有都有所有的屬性，每一個屬性都會通過一系列的計算過程得到最終的值。
這里來回顧一下計算過程，大致有以下幾個步驟：
- 確定聲明值
- 層疊沖突
- 使用繼承
- 使用默認值
其中的第二步和第三步層疊和繼承會有一些需要注意的知識點，這里我們一起來看一下。
層疊規則
CSS 是 Cascading Style Sheets 的縮寫，這暗示層疊（cascade）的概念是很重要的。
在最基本的層面上，它表明 CSS 規則的順序很重要，但它比那更復雜。
什么選擇器在層疊中勝出取決于三個因素（這些都是按重量級順序排列的，前面的的一種會否決后一種）：
- 重要性（Importance）
- 專用性（Specificity）
- 源代碼次序（Source order）
重要性
在 CSS 中，有一個特別的語法可以讓一條規則總是優先于其他規則： !important 。
知道 !important 存在是很有用的，這樣當你在別人的代碼中遇到它時，你就知道它是什么了。
但是！建議你千萬不要使用它，除非你絕對必須使用它。您可能不得不使用它的一種情況是，當您在修改某個組件樣式時，你不能編輯該組件核心的 CSS 模塊，又或者你確實想要重寫一種不能以其他方式覆蓋的樣式。
但是，如果你能避免的話，不要使用它。由于 !important 改變了層疊正常工作的方式，因此調試 CSS 問題，尤其是在大型樣式表中，會變得非常困難。
專用性
專用性基本上是衡量選擇器的具體程度的一種方法，主要是指它能匹配多少元素。
元素選擇器具有很低的專用性。類選擇器具有更高的專用性，所以將戰勝元素選擇器。ID 選擇器有甚至更高的專用性, 所以將戰勝類選擇器，戰勝 ID 選擇器的方法則是 style 中的樣式或者 !important。
一個選擇器具有的專用性的量可以用四種不同的值（或組件）來衡量的，它們可以被認為是千位，百位，十位和個位，在四個列中的四個簡單數字：
- 千位：如果聲明是在 style 屬性中該列加 1 分（這樣的聲明沒有選擇器，所以它們的專用性總是 1000）否則為 0。
- 百位：在整個選擇器中每包含一個 ID 選擇器就在該列中加 1 分。
- 十位：在整個選擇器中每包含一個類選擇器、屬性選擇器、或者偽類就在該列中加 1 分。
- 個位：在整個選擇器中每包含一個元素選擇器或偽元素就在該列中加 1 分。
注：通用選擇器（*）, 復合選擇器（+、>、~、空格）和否定偽類（:not）在專用性中無影響。
舉個例子：
| 選擇器 | 千位 | 百位 | 十位 | 個位 | 合計值 |
|---|---|---|---|---|---|
| h1 | 0 | 0 | 0 | 1 | 0001 |
| #indentifier | 0 | 1 | 0 | 0 | 0100 |
| h1 + p::first-letter | 0 | 0 | 0 | 3 | 0003 |
| li > a[href*=” zh-CN”] > .inline-warning | 0 | 0 | 2 | 2 | 0022 |
| 沒有選擇器, 規則在一個元素的 style 屬性里 | 1 | 0 | 0 | 0 | 1000 |
源代碼次序
如果多個相互競爭的選擇器具有相同的重要性和專用性，那么第三個因素將幫助決定哪一個規則獲勝，也就是說，選擇哪一個選擇器取決于源碼順序。
例如：
p {color: red;
}p {color: blue;
}
不過有一點大家需要注意的是，當多個 CSS 規則匹配相同的元素時，它們都被應用到該元素中。只不過后面因為層疊規則被層疊掉了而已。打開 Elements > Styles 我們就能看到：
繼承規則
所謂繼承，就是應用于某個元素的一些屬性值將由該元素的子元素繼承，而有些則不會。
究竟哪些屬性能夠被子元素繼承，可以參閱：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference
CSS 為處理繼承提供了四種特殊的通用屬性值：
- inherit：該值將應用到選定元素的屬性值設置為與其父元素一樣。
- initial：該值將應用到選定元素的屬性值設置為與瀏覽器默認樣式表中該元素設置的值一樣。如果瀏覽器默認樣式表中沒有設置值，并且該屬性是自然繼承的，那么該屬性值就被設置為 inherit。
- unset：該值將屬性重置為其自然值，即如果屬性是自然繼承的，那么它就表現得像 inherit，否則就是表現得像 initial。
- revert：如果當前的節點沒有應用任何樣式，則將該屬性恢復到它所擁有的值。換句話說，屬性值被設置成自定義樣式所定義的屬性（如果被設置）， 否則屬性值被設置成用戶代理的默認樣式。
注： initial 和 unset 不被 IE 支持。
繼承的就近原則
由于屬性值是由繼承而來，所以屬性值會繼承離自己近的那個元素的屬性。例如：
<div class="one"><div class="two"><p>Lorem ipsum dolor sit amet.</p></div>
</div>
.two {color: blue;
}.one {color: red;
}
在上面的示例中，two 比 one 更加接近 p，所以最終采用的是 two 的 color 值。段落呈現藍色。
真題解答
- 請簡述一下 CSS 中的層疊規則
參考答案：
CSS 中當屬性值發生沖突時，通過層疊規則來計算出最終的屬性值，層疊規則可以分為 3 塊：
- 重要性（Importance）：!important 設置該條屬性值最重要，但是一般不推薦使用。
- 專用性（Specificity）：專用性主要是指它能匹配多少元素，匹配得越少專用性越高。
- 源代碼次序（Source order）：在重要性和專用性都一致的情況下，屬性值取決于源代碼的先后順序。
-EOF-
