变量级联

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

得到这个结果：