CSS中樣式中的層疊與繼承
一、對標題的解釋：
什麼叫做層疊？什麼又叫做繼承？
就是在我們實際寫專案的時候，我們會常常會寫一些樣式，這些樣式會被應用於我們的元素中。但是如果我們的專案比較大的話，或者我們一個元素在不同的位置想要使用不同的樣式，這個時候，我們會發現我們寫的樣式顯示出來的樣子不是我們想要的。這個時候，就涉及到層疊與繼承了。
首先：層疊是一個定義瞭如何合併來自多個源的屬性值的演算法。然後瀏覽器根據優先順序來決定當多個規則有不同選擇器對應相同的元素的時候需要使用哪個規則。將層疊與優先順序結合在一起，就可以比較好理解。如果我們對一個元素寫了多個樣式，誰的優先順序高那麼它就應用那個樣式了。與此同時，我們可能也會想到另外一個點，就是如果我們整個頁面中的字型都一樣的，然後裡面運用的選擇器數量有很多，那麼我們並不想在每個選擇器中都寫相同的字型樣式，這個時候，就引出了我們i第二個概念，就是繼承。有了繼承，我們可以不寫那麼多的字型樣式。
二、它們三個是如何工作的呢？
首先，我們得記得元素的優先順序中id選擇器>類選擇器>元素選擇器。如果我們選擇器都是一樣的情況下，後面的優先順序會高於前面。然後我們繼承的話，我們子元素會繼承父元素的樣式（除了width margin padding border)當我們想在這個元素下使用新的元素樣式，那麼我們可以使用id選擇器，重新寫一個樣式。
然後我們在繼承中也可以使用如下的元素，獲得不同的繼承樣式：inherit——
initial——
revert (en-US)——unset。
revert-layer (en-US)——
unset——inherit，否則和 initial 一樣
以上內容來源：
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#%E7%90%86%E8%A7%A3%E7%BB%A7%E6%89%BF
案例：
<!DOCTYPE html> <html> <head><title>test1</title> <style type="text/css"> body { color: green; } .my-class-1 a { color: inherit; } .my-class-2 a { color: initial; } .my-class-3 a { color: unset; } </style> </head> <body> <ul> <li>Default <a href="#">link</a> color</li> <li class="my-class-1">Inherit the <a href="#">link</a> color</li> <li class="my-class-2">Reset the <a href="#">link</a> color</li> <li class="my-class-3">Unset the <a href="#">link</a> color</li> </ul> </body> </html>
輸出結果：