溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
也許你瞧不起以前的 css ，但是你不該再輕視眼下的 css 。近年來 css 的變量系統已逐步得到各大瀏覽器廠商支持，自定義選擇器等強勢襲來，嵌套系統/模塊系統也在路上...為了更好的掌握 css 這門語言，很有必要把之前零零散散的 css 知識回爐重造下。
css 作為一門語言而，也有其繼承原理，雖然簡單，你卻未必掌握。
初始值是指當屬性沒有指定值時的默認值，如這些語句的值都是默認值：
background-color: transparent、
left: auto 、
float: none、
width: auto 等。
css 的繼承很簡單，分為默認繼承的和默認不繼承的，但所有屬性都可以通過設置
inherit 實現繼承。
當沒有指定值時，默認繼承的屬性取父元素的同屬性的計算值（相當于設置了
inherit ），默認不繼承的屬性取屬性的初始值（時相當于設置了
initial ）。
可以看到涉及到文本相關的屬性，都是默認繼承的，畢竟 css 設計之初就是為了更好的在網頁上呈現文字。
需要注意的是，部分屬性的默認值是會根據元素的
display 屬性的值而計算的，比如
vertical-align 屬性，如果是
display: inline 元素，則其計算值為基線對齊
vertical-align: baseline ，如果是
display: inline-block 元素，則其計算值為
vertical-align: bottom 。
css 為控制繼承提供了四個特殊的通用屬性值（屬性
revert 只有很少的瀏覽器支持，所以實際上是三個），每個 css 屬性都能使用這些值。
設置該屬性會使子元素屬性和父元素相同。實際上，就是“開啟繼承”。
將屬性的初始值應用于元素。實際上，就是“重置為默認值”。
將屬性重置為自然值，也就是如果屬性是自然繼承的那么就是
inherit ，否則和
initial 一樣。
這些通用屬性值可以有很多妙用，舉個栗子：
inherit 實現如下圖片倒影：
div::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
bottom: -100%;
background-image: inherit; // 背景圖片繼承，這一般人想不到吧...
transform: rotateX(180deg);
}
web前端開發學習Q-q-u-n： 731771211，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻，PDF）
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;
}
web前端開發學習Q-q-u-n： 731771211，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻，PDF）
css 的繼承真的很簡單，只需要記住那些默認繼承的，剩下的都是默認不繼承的。而默認繼承的元素除了文本相關的哪些，只有
visibility、cursor 比較常用了，也是比較容易記得的。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
