變數級聯

CSS 變數與其他屬性的級聯方式大致相同，可以安全地重新設定。

你可以多次定義變數，只有具有最高特異性的定義才會應用於所選元素。

假設這個 HTML：

<a class="button">Button Green</a>
<a class="button button_red">Button Red</a>
<a class="button">Button Hovered On</a>

我們可以寫這個 CSS：

.button {
  --color: green;
  padding: .5rem;
  border: 1px solid var(--color);
  color: var(--color);
}

.button:hover {
  --color: blue;
}

.button_red {
  --color: red;
}

得到這個結果：