自定義屬性（CSS 變量或者級(jí)聯(lián)變量）是由 CSS 作者定義的，它包含的值可以在整個(gè)文檔中重復(fù)使用。
自定義屬性標(biāo)記設(shè)定值（比如：--main-color: black;），由 var() 函數(shù)來(lái)獲取值（比如： color: var(--main-color);）
1. 基本用法
1.1 定義自定義屬性
聲明一個(gè)自定義屬性，屬性名需要以兩個(gè)減號(hào)（--）開(kāi)始，屬性值則可以是任何有效的 CSS 值。和其他屬性一樣，自定義屬性也是寫在規(guī)則集之內(nèi)的，如下：
element {
--main-bg-color: brown;
}
注意，規(guī)則集所指定的選擇器定義了自定義屬性的可見(jiàn)作用域，大小寫敏感。
通常的最佳實(shí)踐是定義在根偽類 :root 下，這樣就可以在 HTML 文檔的任何地方訪問(wèn)到它：
:root {
--main-bg-color: brown;
}
1.2 使用自定義屬性
使用一個(gè)局部變量時(shí)用 var() 函數(shù)包裹以表示一個(gè)合法的屬性值：
element {
background-color: var(--main-bg-color);
}
2. 自定義屬性的繼承性
自定義屬性會(huì)繼承。即在父元素上定義的自定義屬性，子元素都可以使用該自定義屬性。
3. 自定義屬性的備用值
用 var() 函數(shù)可以定義多個(gè)備用值(fallback value)，當(dāng)給定值未定義時(shí)將會(huì)用備用值替換。
函數(shù)的第一個(gè)參數(shù)是自定義屬性的名稱。如果提供了多個(gè)參數(shù)，則表示備用值。
.two {
color: var(--my-var, red); /* 如果 --my-var 為定義，那么 color 為 red */
}
.three {
background-color: var(
--my-var,
var(--my-background, pink)
); /* 如果 --my-var and --my-background 為定義，那么結(jié)果就是 pink */
}
.three {
background-color: var(--my-var, --my-background, pink); /* 無(wú)效 */
}
4. 無(wú)效的自定義屬性值
當(dāng)瀏覽器遇到無(wú)效的 var() 時(shí)，會(huì)使用繼承值或初始值代替。
<p>This paragraph is initial black.</p>
:root {
--text-color: 16px;
}
p {
color: blue;
}
p {
color: var(--text-color);
}
瀏覽器將 --text-color 的值替換給了 var(--text-color)，但是 16px 并不是 color 的合法屬性值。
代換之后，該屬性不會(huì)產(chǎn)生任何作用。瀏覽器會(huì)執(zhí)行如下兩個(gè)步驟：
檢查屬性 color 是否為繼承屬性。是，但是
<p>沒(méi)有任何父元素定義了 color 屬性。轉(zhuǎn)到下一步。將該值設(shè)置為它的默認(rèn)初始值，比如 black。
5. JavaScript 中的值
// 獲取一個(gè) Dom 節(jié)點(diǎn)上的 CSS 變量
element.style.getPropertyValue('--my-var');
// 獲取任意 Dom 節(jié)點(diǎn)上的 CSS 變量
getComputedStyle(element).getPropertyValue('--my-var');
// 修改一個(gè) Dom 節(jié)點(diǎn)上的 CSS 變量
element.style.setProperty('--my-var', jsVar + 4);
