常寫 CSS 應該都經常遇到樣式被覆蓋後不如預期希望回復為初始值等等的問題
常見的場景可能是使用 bootstrap, semantic 等等的 css framework 時，可能是 display, color 等等的屬性值被繼承或更改，希望回復為預設值或繼承至 parent．
另外在專門做網頁第三方元件，像是 disqus 這種必須放在百百種網頁上的元件，在技術規劃初期就將所有 CSS 做上 all: initial 更是一種選項!
以下就讓我們看看 initial/inhreit/unset 三者的差別吧 ~
- initial
將此屬性值恢復為 css property 的預設值，至於是什麼值可以參考 css 2.1 spec 或者是 css3 spec。 備註：所有 browser 的 tag ，比如<a>都有自己的一套預設樣式（user agent stylesheet），就像 input 在 各 browser 都長不一樣 是相同的道理，但不等同於 initial 的預設值。 - inherit
繼承 parent 的設定值 - unset
如果 parent 有設定此屬性值則inherit，反之則initial
讓我們來個簡單的例子，相信你也可以很簡單弄懂他們的差別 XD
首先有個 HTML:
<div class="wrapper">
<p class="inherit">我是 inherit</p>
<p></p>
<p class="initial">我是 initial</p>
<p></p>
<p class="unset">我是 unset</p>
<p>我什麼都不做</p>
</div>然後對應的 CSS:
.wrapper {
color: orange;
}
.wrapper p {
color: purple;
}
p.inherit {
color: inherit;
}
p.initial {
color: initial;
}
p.unset {
color: unset;
}結果:
在 Chrome 上看的結果
- 因為
inherit是繼承，所以會套用到.wrapper的橘色 - 因為
initial會恢復為瀏覽器預設值，在 Chrome 是黑色 - 因為
unset時，發現 parent 有設值，因此會跟inherit相同為橘色 - 如果什麼也不做，會套用到所設定的紫色
看起來應該不難懂 XD
參考資料:
https://developer.mozilla.org/en-US/docs/Web/CSS/initial
https://developer.mozilla.org/en-US/docs/Web/CSS/inherit