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-indent、text-align、text-shadow、text-decoration、text-transform、direction

列表元素默認繼承：list-style、list-style-type、list-style-position、list-style-image

表格元素默認繼承：border-collapse

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

所有元素默認不繼承：all、display、overflow

行內元素默認不繼承：vertical-align

盒子屬性默認不繼承：width、height、padding、margin、border、min-width、min-height、max-width、max-height

背景屬性默認不繼承：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 。詳情請參考 這篇文章。

四個通用屬性值

css 為控制繼承提供了四個特殊的通用屬性值，每個 css 屬性都能使用這些值。

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

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

將屬性重置為自然值，也就是如果屬性是自然繼承的那麼就是 inherit ，否則和 initial 一樣。

表示使用樣式表中定義的元素屬性的默認值。若用戶定義樣式表中顯式設置，則按此設置；否則，按照瀏覽器定義樣式表中的樣式設置；否則，等價於 unset 。（屬性值 revert 目前只有很少的瀏覽器支持）

css3 增加了 all 屬性，其值可以是上面四個之一，表示重置元素所有屬性的值重置為其初始值，或繼承值。

實例

這些通用屬性值可以有很多妙用，舉個慄子：

利用 inherit 實現如下圖片倒影：地址

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

複製代碼
利用 initial 重置 left 為默認值 auto：地址
div {  position: absolute;  left: 20px;  top: 20px;}div + div {  left: initial;  right: 20px;}

複製代碼
例子中 div 設置過了 left ，div2 的 right 若要生效，須將 left 重置為初始值 initial （或者 unset ）。
利用 unset 將屬性重置為未設置之前的值：地址
例子中 p 標籤的 color 是默認繼承屬性，所以此時 color: unset 相當於 color: inherit 。 p 標籤的 border 屬性是默認不繼承屬性，所以此時 border: unset 相當於 border: initial 。
.unset {  border: unset;  color: unset;}
複製代碼
總結css 的繼承真的很簡單，只需要記住那些默認繼承的，剩下的都是默認不繼承的。而默認繼承的元素除了文本相關的哪些，只有 visibility、cursor 比較常用了，也是比較容易記得的。
來源：https://juejin.im/post/5dcb89186fb9a04a752ba034
聲明：著作權歸原作者所有。本文為轉載文，文章及圖片均來自網際網路，如有侵權請聯繫小編刪除！！！