【Hello CSS】第七章-CSS的繼承與可變性

• 做者：陳大魚頭
• github： KRISACHAN

繼承

繼承（英語：inheritance） 是 面向對象軟件技術當中的一個概念。在 CSS 中與 層疊（英語：Cascade） 一塊兒描述瞭如何設置樣式規則，併爲全部元素的全部屬性賦值。這兩個屬性同屬規範 「 CSS Cascading and Inheritance Level 」。CSS中的 繼承 其實是父級元素對子元素的影響。

在以前的文章中，咱們介紹過 層疊（優先級） 的規則，這裏咱們先複習一下：

選擇器	千位	百位	十位	個位	合計值
h1	0	0	0	1	0001
#indentifier	0	1	0	0	0100
h1 + p::first-letter	0	0	0	3	0003
li > a[href*="zh-CN"] > .inline-warning	0	0	2	2	0022
沒有選擇器, 規則在一個元素的 <style> 屬性裏	1	0	0	0	1000

魚頭注：有不少人會認爲 !important 也參與了優先級的排列，但 !important 是在優先級的規則以外的，若是參與了優先級的排列，意思就是 !important 是能夠被覆蓋的，但事實顯然不是。

接下來咱們談談 CSS中的繼承。

特殊的通用屬性值

CSS爲處理繼承提供了四種特殊的通用屬性值，其值以下：

值	意義
inherit	屬性初始值。
initial	繼承的值。
unset	若是使用 unset 的屬性爲繼承屬性，則將其視爲 inerit，不然則視爲 initial。
revert	屬性值被設置成自定義樣式所定義的屬性（若是被設置）， 不然屬性值被設置成用戶代理的默認樣式。

reset屬性值

在這裏分享一個CSS屬性all。CSS all 簡寫屬性 將除卻 unicode-bidi 與 direction 以外的全部屬性重設至其初始值，或繼承值。 all 的值能夠以下：

/* Global values */
all: initial
all: inherit
all: unset

/* CSS Cascading and Inheritance Level 4 */
all: revert;

以上四值的功能如上面的表同樣。這裏咱們重點分享一下 revert。revert關鍵字指定依賴於CSS聲明的源：

• 用戶代理源（user-agent origin）：瀏覽器會有一個 基本的樣式表 來給任何網頁設置默認樣式，這些樣式統稱用戶代理樣式，等同於 unset。
• 用戶源（user origin）：網站的用戶（或讀者）所選擇的自定義樣式，主要是根據用戶的一員定製（例如用戶自定義的系統主題與字體）。
• 做者源（author origin）：網站開發者定義的樣式。

例子以下：

<style>
    body {
        color: #404040;
        background: #DDDDDD;
    }
    blockquote {
        border-radius: 5px;
        padding: 15px;
        background: #0F60B6;
        color: #FFFFFF;
        display: table;
    }
    .all-unset {
        all: unset;
    }
    .all-initial {
        all: initial;
    }
    .all-inherit {
        all: inherit;
    }
</style>
<h1 aria-level="1">雞湯大全</h1>
<section aria-level="2">
    <h2 role="heading">名言警句</h2>
    <blockquote cite="https://www.juzimi.com/album/3903593">
        人若志趣不遠，心不在焉，雖學不成。
        <cite>— 張載</cite>
    </blockquote>
</section>
<section aria-level="2">
    <h2 role="heading">名言警句（all: unset）</h2>
    <blockquote class="all-unset" cite="https://www.juzimi.com/album/3903593">
        人若志趣不遠，心不在焉，雖學不成。
        <cite>— 張載</cite>
    </blockquote>
</section>
<section aria-level="2">
    <h2 role="heading">名言警句（all: initial）</h2>
    <blockquote class="all-initial" cite="https://www.juzimi.com/album/3903593">
        人若志趣不遠，心不在焉，雖學不成。
        <cite>— 張載</cite>
    </blockquote>
</section>
<section aria-level="2">
    <h2 role="heading">名言警句（all: inherit）</h2>
    <blockquote class="all-inherit" cite="https://www.juzimi.com/album/3903593">
        人若志趣不遠，心不在焉，雖學不成。
        <cite>— 張載</cite>
    </blockquote>
</section>

效果以下：

代碼在我codepen (https://codepen.io/krischan77... 中，你們能夠隨時查看。

魚頭注：至於CSS中可繼承的屬性有點多，我就不列出來了，各位有興趣的能夠看看這個問題：https://stackoverflow.com/questions/5612302/which-css-properties-are-inherited 。

計算值（Computed Value）

計算值（Computed Value） 是解析指定屬性值的結果，經過將其絕對化用以繼承。

計算值（Computed Value） 用以繼承時是由父節點傳達到子節點的值，因爲歷史緣由，它不必定是由 getComputedStyle() 返回的結果。

常見的計算值（Computed Value） 有：em、ex、vh、vw、smaller、bolder等不固定具體px尺寸的值。

下面是一個不一樣計算值單位下盒子的寬度變化的DEMO

代碼有點長，就不貼出來了，有興趣能夠點開連接嘗試一下：https://krissarea.gitee.io/bl...。

功能表示法（Functional Notations）

功能表示法是一種組件值，能夠表示更復雜的類型或調用特殊處理。主要分有如下三個部分：

• 數學表達式（用以四則運算）：calc()、 min()、max()和clamp()。
• 切換值（容許子元素循環調用傳入參數）：toggle()。
• 屬性引用（獲取引用的屬性）：attr()。

以上功能屬性，在以前的章節中也提到過，目前能用的就只有 calc() 跟 attr()，可是即使如此，這兩個函數已經卻也已經發揮出了很強大的功能。

var()

var() 是 CSS Custom Properties for Cascading Variables Module Level 1 的內容，中文名叫 自定義屬性，並不叫CSS變量，並不叫CSS變量，並不叫CSS變量，重要的內容說三次。

語法以下：

var( <custom-property-name> , <declaration-value>? )

方法的第一個參數是要替換的自定義屬性的名稱。函數的可選第二個參數用做回退值。若是第一個參數引用的自定義屬性無效，則該函數將使用第二個值。

咱們能夠在任何選擇器中聲明，例子以下：

// 下面的定義都是有效的
:root {
    --color: red;
}
@media (min-width: 300px) {
    :root {
        --color: blue;
    }
}
.color {
    --color: white;
}
a {
    color: var(--color, black);
}

從上面的代碼咱們能夠知道，自定義屬性不只僅能夠在全局做用域下定義，甚至也能夠在局部做用域下定義，這點是一些 CSS處理器 所沒法實現的。

咱們知道，CSS目前尚未條件判斷的功能，可是咱們藉由數學表達式函數 calc() 也能夠實現不少有趣的功能。

這裏咱們分享一個由 var() 跟 calc() 實現的進度條功能，效果以下：

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .progress {
        height: 20px;
        width: 300px;
        background-color: #f5f5f5;
    }
    .progress::before {
        counter-reset: progress var(--percent, 0);
        content: counter(progress) '%\2002';
        display: block;
        height: 20px;
        line-height: 20px;
        width: calc(300px * var(--percent, 0) / 100);
        font-size: 12px;
        color: #fff;
        background-color: #2486ff;
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
    }
</style>
<div id="progress" class="progress"></div>
<script>
    'use strict';
    let count = 0;
    const progressAdd = count => {
        if (count < 100) {
            count++;
            progress.style = `--percent: ${count}`;
            setTimeout(() => {
                progressAdd(count);
            }, 100);
        };
    };
    progressAdd(count);
</script>

代碼在我codepen: https://codepen.io/krischan77/pen/QPezjB中，各位隨時能夠去看效果。

currentColor

關鍵字 currentColor 是屬性 color 的值，若是 color 上設置 currentColor ，則將其視爲 color: inherit。

border 和 box-shadow 默認的顏色就是當前的文字顏色，也就是相似 currentColor。

嗯，因此有什麼用？

咱們能夠經過 currentColor 來輕鬆實現換膚功能。DEMO以下：

<style>
    html,
    body {
      color: #000000;
    }
    .box {
      width: 100px;
      height: 100px;
      background: currentColor;
      padding: 10px;
    }
</style>
<div id="box" class="box"></div>
  你想換的顏色：<input id="color" name="color" type="color" value="#000000" autocomplete="off">
<script>
    'use strict';
    color.onchange = event => {
        document.querySelector('body').style.color = color.value;
    };
</script>

currentColor 是 CSS3 中很是好用的一個關鍵字，利用它咱們就能夠輕鬆實現文本顏色與圖形之間的互動。

說到這裏，不知道你們有沒有以爲很奇怪， 像 multi-word 這種具備連字符的單詞纔是 CSS 中的常規命名，而 currentColor 確是駝峯命名？若是你知道答案的話，能夠在下方留言區域留言回答，不知道的話也不要緊，能夠持續關注魚頭的 『Hello CSS』，魚頭會在下一篇文章中解答。

後記

本文主要簡單分享了 CSS 的繼承與可變性，同時也再次地回顧了以前系列中所分享過的層級，函數等內容，一方面是想作個整理概括，若是 CSS 屬性分配得恰當，不只能夠減輕咱們不少的工做量，也能夠輕鬆實現一些比較有趣的效果，更重要是能夠減小JS 與 CSS 的耦合度，對咱們的開發與後期維護也是有很大幫助的。

你們也不妨多挖掘挖掘 CSS 的潛在能力，這也許會帶來意想不到的收穫。

參考資料：

CSS Cascading and Inheritance Level 4

CSS Values and Units Module Level 4

Origin of CSS declarations

【Hello CSS】系列

【Hello CSS】是以CSS基礎概念爲主題的系列文章，旨在幫助你們更深入地瞭解而且提升CSS在各位開發者心目中的地位。因爲魚頭我水平有限，文筆有限，若是各位在文章中發現有任何不合理，不正確的地方，還煩不吝指出，我會很是感謝的；若是經過文章有任何想法或疑問，也但願各位能積極留言，咱們互相探討；若是經過本系列文章有所收穫，這就讓魚頭我喜不自勝了！

若是你也喜歡CSS，喜歡探討技術，或者對本文，本系列有任何的意見或建議，很是歡迎加魚頭微信好友一塊兒探討，固然，魚頭也很是但願能跟你一塊兒聊生活，聊愛好，談天說地。
魚頭的微信號是：krisChans95
也能夠掃碼添加好友，備註「SF」就行