CSS 覆蓋變數
用區域性變數覆蓋全域性變數
從上一頁我們瞭解到，全域性變數可以在整個文件中訪問/使用，而區域性變數只能在其宣告的選擇器內部使用。
請看上一頁的示例
示例
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
自己動手試一試 »
有時我們希望變數只在頁面的特定部分發生變化。
假設我們想要按鈕元素使用不同顏色的藍色。那麼，我們可以在按鈕選擇器內部重新宣告 --blue 變數。當我們在該選擇器內部使用 var(--blue) 時，它將使用此處宣告的區域性 --blue 變數值。
我們看到區域性 --blue 變數將覆蓋按鈕元素的全域性 --blue 變數
示例
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
button {
--blue: #0000ff; /* 區域性變數將覆蓋全域性變數 */
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
自己動手試一試 »
新增新的區域性變數
如果一個變數只在一個地方使用，我們也可以宣告一個新的區域性變數，像這樣：
示例
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
button {
--button-blue: #0000ff; /* 新的區域性變數 */
background-color: var(--white);
color: var(--button-blue);
border: 1px solid var(--button-blue);
padding: 5px;
}
自己動手試一試 »
瀏覽器支援
表中的數字表示完全支援 var() 函式的第一個瀏覽器版本。
| 函式 | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() 函式
| 屬性 | 描述 |
|---|---|
| var() | 插入 CSS 變數的值 |
