如何设置CSS自定义属性--foo为noop值，使按钮保留原有红色背景

要实现background: var(--foo)不覆盖前面的background: red，有两种简单方法：

• 直接给--foo设成和原有背景一样的值
  把:root里的--foo赋值为red就行，这样第二条background声明等于重复设置同一个颜色，最终按钮背景还是红色：

  :root {
    --foo: red;
  }
  

• 给--foo设置无效的背景属性值
  如果想让第二条background规则直接失效，可以把--foo设成一个不符合background语法的值，比如随便一个无意义的字符串。浏览器遇到无效的属性值会直接忽略这条声明，自然就保留了之前的background: red：

  :root {
    --foo: xxx;
  }
  

  只要是background不认可的值都可以，比如123、invalid这类都能生效。

原理很简单：CSS变量如果被用来设置无效的属性值，对应的属性声明会被浏览器忽略，自动回退到上一个有效的属性设置。

内容的提问来源于stack exchange，提问作者sir_thursday