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;
}

親自試一試

有時，我們希望變量僅在頁面的特定部分中進行更改。

假設我們想要按鈕元素使用不同的藍色。那么，我們可以在 button 選擇器內重新聲明 --blue 變量。當我們在這個選擇器中使用 var(--blue) 時，它將使用此處聲明的局部 --blue 變量值。

我們看到局部的 --blue 變量會覆蓋 button 元素的全局 --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() 49.0 15.0 31.0 9.1 36.0

CSS var() 函數

函數 描述
var() 插入 CSS 變量的值。