CSS-如何在Chrome和Firefox中启用自定义属性？

您好，目前我正在学习CSS，我看到CSS自定义属性。我试图在VS代码上创建一个变量，并使用LiveServer运行它，但我的变量似乎不起作用。为了在Chrome/Firefox上使用CSS变量，我需要先启用什么吗？如何启用它？谢谢

我使用的是Firefox 68.9.0esr（32位）和Chrome 83.0.4103.116（官方版本）（64位）

我的css变量仅如下所示：

@import url('http://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap')
:root {
    --mistyrose: #ffe4e1;
    --blue: #118add;
    --green: #71cf17;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--mistyrose);

    /* center content */
    margin: 0 auto;
    width: 85%;
    border-right: 3px solid var(--blue);
    border-left: 3px solid var(--green);
}

---

嗯，您在

@import

语句中遗漏了一个分号（

；

），因此您的

：root

元素将被忽略，并且不会产生任何影响

如果您修复了它，它应该是这样的，您的代码将按预期工作：

@导入url（'http://fonts.googleapis.com/css2?family=Montserrat:wght@400；600&display=swap'）；
：根{
--米松糖：#ffe4e1；
--蓝色：#118添加；
--绿色：#71cf17；
}
身体{
字体系列：“蒙特塞拉特”，无衬线；
背景颜色：var（--Mistrose）；
/*中心内容*/
保证金：0自动；
宽度：85%；
右边框：3px实心变量（--蓝色）；
左边框：3px实心变量（--绿色）；
}

no这两种浏览器都支持开箱即用的变量。