CSS簡單的繼承

在css中，每一個CSS 屬性定義的概述都指出了這個屬性是默認繼承的("Inherited: Yes") 仍是默認不繼承的("Inherited: No")。這決定了當你沒有爲元素的屬性指定值時該如何計算值。 —— MDN

也許你瞧不起之前的 css ，可是你不應再輕視眼下的 css 。近年來 css 的變量系統已逐步獲得各大瀏覽器廠商支持，自定義選擇器等強勢襲來，嵌套系統/模塊系統也在路上...爲了更好的掌握 css 這門語言，頗有必要把以前零零散散的 css 知識回爐重造下。

css 做爲一門語言而，也有其繼承原理，雖然簡單，你卻未必掌握。

屬性的是否默認繼承

初始值是指當屬性沒有指定值時的默認值，如這些語句的值都是默認值：background-color: transparent、left: auto 、float: none、width: auto 等。

css 的繼承很簡單，分爲默認繼承的和默認不繼承的，但全部屬性均可以經過設置 inherit 實現繼承。

當沒有指定值時，默認繼承的屬性取父元素的同屬性的計算值（至關於設置了 inherit ），默認不繼承的屬性取屬性的初始值（時至關於設置了 initial ）。

默認繼承的 ("Inherited: Yes") 的屬性：

• 全部元素默認繼承：visibility、cursor
• 內聯元素默認繼承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
• 塊狀元素默認繼承：text-indent、text-align
• 列表元素默認繼承：list-style、list-style-type、list-style-position、list-style-image
• 表格元素默認繼承：border-collapse

默認不繼承的("Inherited: No") 的屬性：

• 文本屬性默認不繼承：vertical-align、text-decoration、text-shadow、white-space、unicode-bidi
• 盒子屬性默認不繼承：display、width、height、padding、margin、border、min-width、min-height、max-width、max-height、overflow、clip
• 背景屬性默認不繼承：background、background-color、background-image、background-repeat、background-position、background-attachment
• 定位屬性默認不繼承：float、clear、position、top、right、bottom、left、z-index
• 內容屬性默認不繼承：content、counter-reset、counter-increment
• 輪廓屬性默認不繼承：outline-style、outline-width、outline-color、outline
• 頁面屬性默認不繼承：size、page-break-before、page-break-after
• 聲音屬性默認不繼承：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

能夠看到涉及到文本相關的屬性，都是默認繼承的，畢竟 css 設計之初就是爲了更好的在網頁上呈現文字。

須要注意的是，部分屬性的默認值是會根據元素的 display 屬性的值而計算的，好比 vertical-align 屬性，若是是 display: inline 元素，則其計算值爲基線對齊 vertical-align: baseline ，若是是 display: inline-block 元素，則其計算值爲 vertical-align: bottom 。詳情請參考 這篇文章。

通用屬性值 initial、inherit 和 unset

css 爲控制繼承提供了四個特殊的通用屬性值（屬性 revert 只有不多的瀏覽器支持，因此其實是三個），每一個 css 屬性都能使用這些值。

• inherit

設置該屬性會使子元素屬性和父元素相同。實際上，就是「開啓繼承」。

• initial

將屬性的初始值應用於元素。實際上，就是「重置爲默認值」。

• unset

將屬性重置爲天然值，也就是若是屬性是天然繼承的那麼就是 inherit ，不然和 initial 同樣。

實例

這些通用屬性值能夠有不少妙用，舉個栗子：

1. 利用 inherit 實現以下圖片倒影：地址

div::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: -100%;
    background-image: inherit; // 背景圖片繼承，這通常人想不到吧...
    transform: rotateX(180deg);
}
複製代碼

2. 利用 initial 重置 left 爲默認值 auto：地址

div {
  position: absolute;
  left: 20px;
  top: 20px;
}
div + div {
  left: initial;
  right: 20px;
}
複製代碼

例子中 div 設置過了 left ，div2 的 right 若要生效，須將 left 重置爲初始值 initial （或者 unset ）。

3. 利用 unset 將屬性重置爲未設置以前的值：地址

例子中 p 標籤的 color 是默認繼承屬性，因此此時 color: unset 至關於 color: inherit 。 p 標籤的 border 屬性是默認不繼承屬性，因此此時 border: unset 至關於 border: initial 。

.unset {
  border: unset;
  color: unset;
}
複製代碼

總結

css 的繼承真的很簡單，只須要記住那些默認繼承的，剩下的都是默認不繼承的。而默認繼承的元素除了文本相關的哪些，只有 visibility、cursor 比較經常使用了，也是比較容易記得的。

後記

本文確確實實參考了這篇文章，可是我在看原文之時確確實實也是沒有徹底搞明白 css 的繼承究竟是什麼樣的，因此我花了不少時間查了不少文檔來整理思路，最後才明白了 css 的繼承就是這麼簡單的分爲默認繼承和默認不繼承兩種而已。很抱歉一開始沒有附上原文連接，可是原文有60個章節，我只是摘了其中一章的知識點來從新梳理，來讓本身更加清晰並讓你們更容易理解 css 的繼承。且我自己是爲了完成耗子叔的 ARTS 打卡計劃而寫這篇文章的，我掘金上發佈的最近兩篇文章也是，都有抄襲的痕跡，這沒辦法我自己水平不咋地若是徹底靠本身輸出根本寫不出來什麼文章，但我堅信把別人的東西徹底消化了變成本身的，也是一種很是有效的學習方法。

我年前這幾個月被996了，時間少的可憐，可以擠出來一點寫篇文章甚是不易，我固然但願掘友們可以承認。儘管是拿來主義，但我會對內容進行部分總結加工，讓他更加宜懂，更有針對性，更容易記憶。我最近打算把個人 css 知識回爐重造下，因此將來幾篇文章確定都是關於 css 的而且會有幾篇出自 這裏，我也會把 《css揭祕》、《css選擇器世界》看完並寫出本身的總結篇。若是人人都那麼愛讀書，那麼我寫的文章確定沒人看。但事實上並非。因此個人文章目前是寫給那些沒有看過那麼多書的讀者，我也真心的但願可以在我自身進步的同時，幫助你們一塊兒進步，幫助你們更好的學習。