[css] initial/inherit/unset 有什麼差別呢?

常寫 CSS 應該都經常遇到樣式被覆蓋後不如預期希望回復為初始值等等的問題

常見的場景可能是使用 bootstrap, semantic 等等的 css framework 時,可能是 display, color 等等的屬性值被繼承或更改,希望回復為預設值或繼承至 parent.

另外在專門做網頁第三方元件,像是 disqus 這種必須放在百百種網頁上的元件,在技術規劃初期就將所有 CSS 做上 all: initial 更是不可或缺的事情!

以下就讓我們看看 initial/inhreit/unset 三者的差別吧 ~


  • initial
    將此屬性值恢復為瀏覽器預設值.
    備註:所有 browser 都有自己的一套預設樣式,就像 input 在各 browser 都長不一樣是相同的道理
  • inherit
    繼承 parent 的設定值
  • unset
    如果 parent 有設定此屬性值則 inherit ,反之則 initial

讓我們來個簡單的例子,相信你也可以很簡單弄懂他們的差別 XD

首先有個 HTML:

<div class="wrapper">
  <p class="inherit">我是 inherit<p>
  <p class="initial">我是 initial<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

https://developer.mozilla.org/en-US/docs/Web/CSS/unset

https://alligator.io/css/inherit-initial-unset/

Leave a Reply

Your email address will not be published. Required fields are marked *